快捷導(dǎo)航

el-table-column疊加el-popover使用示例小結(jié)

更新時(shí)間：2024年04月22日 10:37:04 作者：微光無限

el-table-column有一列展示多個(gè)tag信息,實(shí)現(xiàn)點(diǎn)擊tag展示tag信息以及tag對應(yīng)的詳細(xì)信息,本文通過示例代碼介紹el-table-column疊加el-popover使用示例小結(jié),感興趣的朋友跟隨小編一起看看吧

需求：el-table-column有一列展示多個(gè)tag信息，實(shí)現(xiàn)點(diǎn)擊tag展示tag信息以及tag對應(yīng)的詳細(xì)信息

table的數(shù)據(jù)格式

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

寫法：

<el-table-column label="配置信息" prop="listName">
        <template slot-scope="scope">
          <el-popover
            placement="bottom"
            title="配置信息以及對應(yīng)詳情"
            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>

實(shí)現(xiàn)了鼠標(biāo)控制懸浮數(shù)據(jù)的顯隱

擴(kuò)展：el-table某一列嵌套使用el-popover,使用click觸發(fā)，導(dǎo)致頁面下拉框組件無法觸發(fā)彈框關(guān)閉（解決辦法）

在彈框觸發(fā)的方法里加上document.body.click() 即可
嘗試了很多其他的方法都沒用，只有這個(gè)解決了
完整代碼：

<el-select
@change="sourceChange"
clearable
>
  <el-option
    v-for="option in list1"
    :key="option.code"
    :label="option.name"
    :value="option.code"
  ></el-option>
</el-select>
sourceChange(){
document.body.click()//重點(diǎn)
}
<el-table-column>
<template slot-scope="scope">
            <el-popover
            width="450"
            :ref="`popover-${scope.row.id}`"
            trigger="click"
            @show="checkAllowed(scope.row)">
              <span slot="reference" style="cursor: pointer;">
                {{scope.row.name}}
              </span>
              <el-table
                :data="List"
                style="width: 100%"
                row-key="id"
                height="214px"
              >
                <el-table-column
                  label="序號"
                  width="45"
                  type="index"
                ></el-table-column>
               </el-table>
            </el-popover>
          </template>
</el-table-column>

到此這篇關(guān)于el-table-column疊加el-popover使用的文章就介紹到這了,更多相關(guān)el-table-column疊加el-popover使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: