上述效果是这样的：当上述两列组件disabled为true时显示一个叹号图标，点击各自的叹号图标显示各自的el-popover。 第一列组件的写法完全ok，第三列组件如果按第一列的写法来写的话，点击完全无响应，不知道为什么。
// 以下代码在同一表格里
...
<template slot-scope="scope">
<div>
<el-cascader :key="scope.index" v-model="scope.row.foodClass" :options="list" :disabled="scope.row.xxx === 2" />
<el-popover placement="top" trigger="click" popper-class="dark-popover">
<i v-if="scope.row.xxx === 2" slot="reference" class="el-icon-warning" />
<div class="router-box">
<el-button type="text" @click="click">操作</el-button>
</div>
</el-popover>
</div>
</template>
...
// 只能换着写
<template slot-scope="scope">
<div>
<el-input v-model.trim="scope.row.foodPrice" />
<el-popover :ref="'popover-' + scope.row.id" v-model="scope.row.visible" placement="top" trigger="click" popper-class="dark-popover">
<i v-if="xxxx" slot="reference" class="el-icon-warning" @click="onClickPopover(scope.row.id)" />
<div class="router-box">
<el-button type="text" @click="click">操作</el-button>
</div>
</el-popover>
</div>
</template>
onClickPopover(id) {
const index = this.ruleForm.tableData.findIndex((v) => v.id === id);
const isShow = !this.ruleForm.tableData[index].visible; // visible是table数组手动加上的，默认为false
if (isShow) {
this.$refs[`popover-${id}`].doShow(); // doShow是看el-popover源码看到的
} else {
this.$refs[`popover-${id}`].doClose(); // doClose是看el-popover源码看到的
}
},
