Vue ElementUI table单元格中使用Popover

Popover的简单介绍

trigger属性用于设置何时触发 Popover，支持四种触发方式：hover，click，focus 和 manual。

对于触发 Popover 的元素，有两种写法：使用 slot="reference" 的具名插槽，或使用自定义指令v-popover指向 Popover 的索引ref。

placement 弹框的出现位置

value / v-model 状态是否可见

hide/show 关闭/显示时触发的事件

table单元格嵌套Popover，点击嵌套内容中的确定或取消来关闭el-popover。

     <el-table-column label="颜色选择" align="center">
      <template slot-scope="scope" >
        <div class="flagBtn">
        <el-popover
          :ref="`popover1-${scope.$index}`"  //定义动态的ref
          placement="top"
          width="250"
          trigger="click"
          @hide="hide"  //弹窗隐藏时候触发的事件
        >
          <el-radio-group v-model="scope.row.Color" style="margin-bottom:10px"> 
            <el-radio label="1">红色</el-radio>
            <el-radio label="2">黄色</el-radio>
            <el-radio label="3">蓝色</el-radio>
            <el-radio label="4">绿色</el-radio>
            <el-radio label="5">橙色</el-radio>                
          </el-radio-group>

         //确定按钮
          <el-button
            type="primary"
            icon="el-icon-check"
            style="padding:8px;margin-left:100px"
            @click="submitColor(scope.$index,scope.row.Color)"
          ></el-button>
          
          //取消按钮
          <el-button
            type="primary"
            icon="el-icon-close"
            style="padding:8px;"
            @click="scope._self.$refs[`popover1-${scope.$index}`].doClose()"  //关闭弹窗
          ></el-button>
          
          //触发el-popover的按钮
          <el-button
            type="text"
            slot="reference"
            v-if="scope.row.flagColor == 1"
            >红色</el-button>
        </el-popover>
        </div>
      </template>
    </el-table-column>

methods:{   
 
//修改颜色
submitColor(index,color){
  this.$refs[`popover1-${index}`].doClose(); //关闭弹框
  // console.log(index)
  //console.log(color)
},
//提交标旗颜色/时间间隔隐藏时触发
hide(){
  this.getTable(); 刷新列表
},
}

官方的嵌套样例虽然可以正常关闭popover,但是在table表格中，使用v-model控制是否可见会失效。也是经过一番借鉴之后动态绑定 ref 来实现。如果一个页面需要使用多个表格嵌套Popover，要区别命名

table单元格使用Popover,实现表格中图片的点击放大

    <el-table-column label="充值截图" align="center">
      <template slot-scope="scope">
        <div class="table-shopInfo">
         <el-popover
            placement="left"
            title=""
            trigger="click">
        <el-image slot="reference" :src="scope.row.rechargeImg" :alt="scope.row.rechargeImg" ></el-image>
        <el-image :src="scope.row.rechargeImg" style="width:350px; height:600px" class="slotImg"></el-image>
    </el-popover>
    </div>
      </template>
    </el-table-column>

实现表格中嵌套图片较为简单,但是也有一定的局限性。单个图片放大还可以。表格图片有多张的情况无法进行，无法进行图片左右切换。需要用其他的方法进行操作。