1、简介：在优化一个页面时发现popper太多太乱，有好几种使用方法，就想着归纳总结一下

2、方式

2-1、直接使用，触发的dom是直接包在里面的，适用于单个少量元素，比如说一个页面就一个按钮需要弹出来

  <el-popover
    placement="bottom"
    title="标题"
    width="200"
    trigger="click"
    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
    <el-button slot="reference">click 激活</el-button>
  </el-popover>

2-2、跟表格配合使用且固定大小的popover，只用写一个popover，优化性能

给表格加上

@cell-click="调用方法"

方法里写

function(row, column, cell){
　　　　　　　if (column.property === 'netWeight') {
　　　　　　　　　　//业务逻辑
                this.editNetWeightForm.unit = row.unit
                this.editNetWeightForm.pieceNum = ''
                this.editNetWeightForm.remark = ''
                this.editNetWeightForm.netWeight = row.netWeight
                // popover开关
                const cellClass = cell.classList
                if (!cellClass.contains('el-popover__reference')) {
                    //  点击其他numCell
                    if (this.curNumCellt) {
                        const curCellClass = this.curNumCellt.classList
                        curCellClass.remove('el-popover__reference')
                        this.curNumCellt = null
                    }
                    this.$nextTick(() => {
                        this.curNumCellt = cell
                        this.$nextTick(() => {
                            const popover = this.$refs.netWeight
                            popover?.doShow()
                        })
                    })
                }
            }
}

html

    <el-popover
            v-if="curNumCellt"
            ref="netWeight"
            :reference="curNumCellt"
            placement="right"
            width="250"
            trigger="click"
        >
            <div v-if="columnType == 'pieceNum'">
                <div class="el-form-item el-form-item--mini" style="margin-bottom: 10px">
                    <label class="el-form-item__label">{{ $t('common.edit') + $t('addSaleOrder.pieceNum') }}</label>
                    <div class="el-form-item__content">
                        <el-input
                            size="mini"
                            v-model="editNetWeightForm.pieceNum"
                            @keydown.enter.native="confirmChangeNum"
                        >
                        </el-input>
                    </div>
                </div>
                <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="closeNumPopover">{{ $t('common.cancel') }}</el-button>
                    <el-button type="primary" size="mini" @click="confirmChangeNum">
                        {{ $t('common.confirm') }}
                    </el-button>
                </div>
            </div>
        </el-popover>

效果

2-3、在第二种方法的基础上做些更改，第二种方法如果popover里面是不固定大小的会导致错位，更改后的方法跟表格配合使用且大小可以不用固定，适用列表等

在表格内嵌的template直接调用方法

                    <el-table-column
                        class-name="align-right"
                        :label="$t('addSaleOrder.netWeightSale')"
                        prop="netWeightSale"
                        align="center"
                    >
                        <template slot-scope="scope">
                            <div
                                style="color: #409eff; cursor: pointer"
                                @click="getUnfinishedSaleOrderPage(scope.row, ...arguments)"
                            >
                                {{ scope.row.netWeightSale }}
                            </div>
                        </template>
                    </el-table-column>

getUnfinishedSaleOrderPage的方法

        getUnfinishedSaleOrderPage(row, dom) {
　　　　　　　//cell兼容谷歌和火狐
            let cell = dom.path ? dom.path[0] : dom.srcElement
            console.log(row)
            this.ajax
                .post('/admin/saleInventory/getUnfinishedSaleOrderPage',this.form)
                .then(res => {
                    console.log(res)
                    this.tableDataNetWeightSale = res.list
　　　　　　　　　　　　//popover
                    if (this.netWeightSaleCellt) {
                        const curCellClass = this.netWeightSaleCellt.classList
                        curCellClass.remove('el-popover__reference')
                        this.netWeightSaleCellt = null
                    }
                    this.$nextTick(() => {
                        this.netWeightSaleCellt = cell
                        this.$nextTick(() => {
                            const popover = this.$refs.netWeightSale
                            popover?.doShow()
                        })
                    })

                })
        },

html

        <el-popover
            v-if="netWeightSaleCellt"
            :reference="netWeightSaleCellt"
            trigger="click"
            placement="top"
            ref="netWeightSale"
        >
            <el-table :data="tableDataNetWeightSale" size="mini" style="width: 610px" min-height="400">
                <el-table-column
                    prop="customerName"
                    :label="$t('customerPrice.customerName')"
                    width="200"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column prop="netWeight" :label="$t('saleInfo.reserveNum')" width="200" show-overflow-tooltip>
                    <template slot-scope="props">
                        {{ props.row.netWeight + props.row.unit }}
                    </template>
                </el-table-column>
                <el-table-column prop="orderTime" :label="$t('pickList.lastestTime')" width="200" show-overflow-tooltip>
                    <template v-slot="{ row }">
                        {{ row.lastestTime | formatTime }}
                    </template>
                </el-table-column>
            </el-table>
        </el-popover>

效果