el-table-column叠加el-popover使用

写bug小白2024-04-19 14:37

需求：el-table-column有一列展示多个tag信息，实现点击tag展示tag信息以及tag对应的详细信息

table的数据格式

javascript 复制代码

data:[
	{
		...,
		isPopoverVisible:false,
	},
	{
		...,
		isPopoverVisible:false,
	},
	...
]

写法：

javascript 复制代码

<el-table-column label="配置信息" prop="listName">
        <template slot-scope="scope">
          <el-popover
            placement="bottom"
            title="配置信息以及对应详情"
            trigger="manual"
            v-model="scope.row.isPopoverVisible"
          >
            <el-cascader-panel :options="scope.row.CopyList"></el-cascader-panel>
            <template slot="reference">
              <div @click="scope.row.isPopoverVisible = !scope.row.isPopoverVisible" style="cursor: pointer;">
                <div style="display: inline-block;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;width: 200px;">
                  <el-tag type="info" style="margin-right: 5px;" v-for="item in scope.row.tableList" :key="item.index">{{ item.dbName }}</el-tag>
                </div>
              </div>
            </template>
          </el-popover>
        </template>
</el-table-column>

实现了鼠标控制悬浮数据的显隐