el-popover使用自定义图标

别拿曾经看以后~2023-08-04 19:20

使用el-popover实现鼠标点击或浮动到自定义图标上弹出表格弹窗，官方文档上使用的是按钮el-button，如果想换成图标或其他的组件的话直接把el-button替换掉即可。注意替换之后的组件一定要加slot="reference" ，不然组件是显示不出来的。
代码如下:

javascript 复制代码

<el-popover
  placement="right"
  width="400"
  trigger="click">
  <el-table :data="gridData">
    <el-table-column width="150" property="date" label="日期"></el-table-column>
    <el-table-column width="100" property="name" label="姓名"></el-table-column>
    <el-table-column width="300" property="address" label="地址"></el-table-column>
  </el-table>
  <i slot="reference" class="el-icon-question"></i>
</el-popover>

<script>
  export default {
    data() {
      return {
        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      };
    }
  };
</script>