vue 实现树形表格 + 展开收起 + tooltip气泡悬浮提示 + 文字内容超出显示溢出

·  阅读 1633
vue 实现树形表格 + 展开收起 + tooltip气泡悬浮提示 + 文字内容超出显示溢出

前言:项目中有的需求,需要在表格中展示树形结构,官网阐述的不是很清晰明了,毕竟不是实战,废话不多少,直接上代码

效果图:

image.png

接口数据结构:

1635840580(1).jpg

DOM结构:

<el-table cell-style="padding:0" :data="treeData" row-key="id" lazy :load="load" :tree-props="{children: 'zzChildren'}">
      <el-table-column show-overflow-tooltip prop="name" :label="$t('appsSecond.item_name')"></el-table-column>
      <el-table-column prop="authRoleCount" label="已授权校色" width="100">
        <template slot-scope="scope">
          <div style="width: 100%;cursor:pointer" @click="openInfoDrawer(scope.row,'role')">
            <span >{{ scope.row.authRoleCount }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="authAccountCount" label="已授权账号" width="170">
        <template slot-scope="scope">
          <div style="width: 100%;cursor:pointer" @click="openInfoDrawer(scope.row,'account')">
            <span >{{ scope.row.authAccountCount }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
复制代码

js结构:

export default {
    data() {
        return {
            treeData: []

        }
    },
    created() {
        this.getInit()
    },
    methoods: {
        getInit() {
            this.treeData = []
            api().then((res) => {
                this.treeData = res.data.data.data.data
                if (this.treeData) {
                    this.initTree(this.treeData)
                }
            })
        },
        initTree(treeData) {
            treeData.forEach(item => {
                item.hasChildren = !item.leaf
            })
        },
        load(row, treeNode, resolve) {
            api().then((res) => {
                let childrenData = res.data.data
                this.initTree(childrenData)
                resolve(childrenData)
            })
        },
    }

复制代码

END...

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改