ElementUI折行表格案例

<template>
    <div class="mod-menu">
        <el-form :inline="true" :model="dataForm">
            <el-form-item>
                <el-button v-if="isAuth('sys:menu:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="dataList"
                border
                style="width: 100%;">
            <el-table-column
                    prop="menuId"
                    header-align="center"
                    align="center"
                    width="80"
                    label="ID">
            </el-table-column>
            <table-tree-column
                    prop="name"
                    header-align="center"
                    treeKey="menuId"
                    width="150"
                    label="名称">
            </table-tree-column>
            <el-table-column
                    prop="parentName"
                    header-align="center"
                    align="center"
                    width="120"
                    label="上级菜单">
            </el-table-column>
            <el-table-column
                    header-align="center"
                    align="center"
                    label="图标">
                <template slot-scope="scope">
                    <!--<icon-svg :name="scope.row.icon?scope.row.icon:''"></icon-svg>-->
                </template>
            </el-table-column>
            <el-table-column
                    prop="type"
                    header-align="center"
                    align="center"
                    label="类型">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.type === 0" size="small">目录</el-tag>
                    <el-tag v-else-if="scope.row.type === 1" size="small" type="success">菜单</el-tag>
                    <el-tag v-else-if="scope.row.type === 2" size="small" type="info">按钮</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="orderNum"
                    header-align="center"
                    align="center"
                    label="排序号">
            </el-table-column>
            <el-table-column
                    prop="url"
                    header-align="center"
                    align="center"
                    width="150"
                    :show-overflow-tooltip="true"
                    label="菜单URL">
            </el-table-column>
            <el-table-column
                    prop="perms"
                    header-align="center"
                    align="center"
                    width="150"
                    :show-overflow-tooltip="true"
                    label="授权标识">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    header-align="center"
                    align="center"
                    width="150"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="text" v-if="isAuth('sys:menu:update')" size="small" @click="addOrUpdateHandle(scope.row.menuId)">修改</el-button>
                    <el-button type="text" v-if="isAuth('sys:menu:delete')" size="small" @click="deleteHandle(scope.row.menuId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
</template>

<script>
    import TableTreeColumn from '../../components/table-tree-column'
    import AddOrUpdate from './menuAddOrUpdate'
    import {treeDataTranslate} from '../../common/js/util';
    import {getMenuList, SubmitMenuDelete} from "../../api/api";

    export default {
        data() {
            return {
                dataForm: {},
                dataList: [],
                dataListLoading: false,
                addOrUpdateVisible: false
            }
        },
        components: {
            TableTreeColumn,
            AddOrUpdate
        },
        activated() {
            this.getDataList()
        },
        methods: {
            // 获取数据列表
            getDataList() {
                this.dataListLoading = true
                getMenuList().then(data => {
                    if(data&&data.length>0){
                        this.dataList = treeDataTranslate(data, 'menuId')
                        this.dataList.forEach(data => {
                            data.name = this.$t('kpmg.' + data.name);
                            if (data.children && data.children.length > 0) {
                                data.children.forEach(d => {
                                    d.name = this.$t('kpmg.' + d.name);
                                    if (d.parentName != null) {
                                        d.parentName = this.$t('kpmg.' + d.parentName);
                                    }
                                    if (d.children && d.children.length > 0) {
                                        d.children.forEach(dd => {
                                            dd.name = this.$t('kpmg.' + dd.name);
                                            if (dd.parentName != null) {
                                                dd.parentName = this.$t('kpmg.' + dd.parentName);
                                            }
                                        });
                                    }
                                });
                            }
                        });
                        this.dataListLoading = false
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            // 新增 / 修改
            addOrUpdateHandle(id) {
                this.addOrUpdateVisible = true
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(id)
                })
            },
            // 删除
            deleteHandle(id) {
                this.$confirm(`确定对[id=${id}]进行[删除]操作?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    SubmitMenuDelete(id).then(data => {
                        if (data && data.code === 0) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.getDataList()
                                }
                            })
                        }
                    }).catch(err => {
                        console.log(err);
                    })
                })
            }
        },
        mounted() {
            let _this = this;
            _this.getDataList();
        },
    }
</script>
<style lang='scss'>
    .mod-menu {
        margin-top: 24px;
        .el-pagination {
            margin-top: 15px;
            text-align: right;
        }
    }
</style>

import {treeDataTranslate} from '../../common/js/util'; utils.js

/**
 * 树形数据转换
 * @param {*} data
 * @param {*} id
 * @param {*} pid
 */
export function treeDataTranslate (data, id = 'id', pid = 'parentId') {
    var res = []
    var temp = {}
    for (var i = 0; i < data.length; i++) {
        temp[data[i][id]] = data[i]
    }
    for (var k = 0; k < data.length; k++) {
        if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
            if (!temp[data[k][pid]]['children']) {
                temp[data[k][pid]]['children'] = []
            }
            if (!temp[data[k][pid]]['_level']) {
                temp[data[k][pid]]['_level'] = 1
            }
            data[k]['_level'] = temp[data[k][pid]]._level + 1
            temp[data[k][pid]]['children'].push(data[k])
        } else {
            res.push(data[k])
        }
    }
    return res
}
/**
 * 是否有权限
 * @param {*} key
 */
export function isAuth (key) {
    return JSON.parse(sessionStorage.getItem('permissions') || '[]').indexOf(key) !== -1 || false
}

table-tree-column

<template>
  <el-table-column :prop="prop" v-bind="$attrs">
    <template slot-scope="scope">
      <span @click.prevent="toggleHandle(scope.$index, scope.row)" :style="childStyles(scope.row)">
        <i :class="iconClasses(scope.row)" :style="iconStyles(scope.row)"></i>
        {{ scope.row[prop] }}
      </span>
    </template>
  </el-table-column>
</template>

<script>
  import isArray from 'lodash/isArray'
  export default {
    name: 'table-tree-column',
    props: {
      prop: {
        type: String
      },
      treeKey: {
        type: String,
        default: 'id'
      },
      parentKey: {
        type: String,
        default: 'parentId'
      },
      levelKey: {
        type: String,
        default: '_level'
      },
      childKey: {
        type: String,
        default: 'children'
      }
    },
    methods: {
      childStyles (row) {
        return { 'padding-left': (row[this.levelKey] > 1 ? row[this.levelKey] * 7 : 0) + 'px' }
      },
      iconClasses (row) {
        return [ !row._expanded ? 'el-icon-caret-right' : 'el-icon-caret-bottom' ]
      },
      iconStyles (row) {
        return { 'visibility': this.hasChild(row) ? 'visible' : 'hidden' }
      },
      hasChild (row) {
        return (isArray(row[this.childKey]) && row[this.childKey].length >= 1) || false
      },
      // 切换处理
      toggleHandle (index, row) {
        if (this.hasChild(row)) {
          var data = this.$parent.store.states.data.slice(0)
          data[index]._expanded = !data[index]._expanded
          if (data[index]._expanded) {
            data = data.splice(0, index + 1).concat(row[this.childKey]).concat(data)
          } else {
            data = this.removeChildNode(data, row[this.treeKey])
          }
          this.$parent.store.commit('setData', data)
          this.$nextTick(() => {
            this.$parent.doLayout()
          })
        }
      },
      // 移除子节点
      removeChildNode (data, parentId) {
        var parentIds = isArray(parentId) ? parentId : [parentId]
        if (parentId.length <= 0) {
          return data
        }
        var ids = []
        for (var i = 0; i < data.length; i++) {
          if (parentIds.indexOf(data[i][this.parentKey]) !== -1 && parentIds.indexOf(data[i][this.treeKey]) === -1) {
            ids.push(data.splice(i, 1)[0][this.treeKey])
            i--
          }
        }
        return this.removeChildNode(data, ids)
      }
    }
  }
</script>

数据格式如下：

[{
  "icon": "fas-home",
  "list": null,
  "menuId": 1,
  "name": "homepage",
  "open": null,
  "orderNum": 0,
  "parentId": 0,
  "parentName": null,
  "perms": null,
  "type": 1,
  "url": "/main",
  "_level": 1,
  "children": [{
    "icon": "tbd",
    "list": null,
    "menuId": 30,
    "name": "我的通知",
    "open": null,
    "orderNum": 0,
    "parentId": 1,
    "parentName": "homepage",
    "perms": "tbd",
    "type": 2,
    "url": null,
    "_level": 2
  },{
    "icon": "tbd",
    "list": null,
    "menuId": 31,
    "name": "警情处置",
    "open": null,
    "orderNum": 0,
    "parentId": 1,
    "parentName": "homepage",
    "perms": "tbd",
    "type": 2,
    "url": null,
    "_level": 2
  },{
    "icon": "tbd",
    "list": null,
    "menuId": 32,
    "name": "我发起的",
    "open": null,
    "orderNum": 0,
    "parentId": 1,
    "parentName": "homepage",
    "perms": "tbd",
    "type": 2,
    "url": null,
    "_level": 2
  },{
    "icon": "tbd",
    "list": null,
    "menuId": 33,
    "name": "我审批的",
    "open": null,
    "orderNum": 0,
    "parentId": 1,
    "parentName": "homepage",
    "perms": "tbd",
    "type": 2,
    "url": null,
    "_level": 2
  },{
    "icon": "tbd",
    "list": null,
    "menuId": 34,
    "name": "publicCustomers",
    "open": null,
    "orderNum": 0,
    "parentId": 1,
    "parentName": "homepage",
    "perms": "tbd",
    "type": 2,
    "url": null,
    "_level": 2
  },{
    "icon": "tbd",
    "list": null,
    "menuId": 35,
    "name": "personalCustomers",
    "open": null,
    "orderNum": 0,
    "parentId": 1,
    "parentName": "homepage",
    "perms": "tbd",
    "type": 2,
    "url": null,
    "_level": 2
  }]
},{
  "icon": "fas-home2",
  "list": null,
  "menuId": 2,
  "name": "workbench",
  "open": null,
  "orderNum": 1,
  "parentId": 0,
  "parentName": null,
  "perms": null,
  "type": 0,
  "url": null,
  "_level": 1,
  "children": [{
    "icon": null,
    "list": null,
    "menuId": 36,
    "name": "myTask",
    "open": null,
    "orderNum": 0,
    "parentId": 2,
    "parentName": "workbench",
    "perms": "tbd",
    "type": 1,
    "url": "/inbox",
    "_level": 2
  },{
    "icon": null,
    "list": null,
    "menuId": 37,
    "name": "earlywarningworkbech",
    "open": null,
    "orderNum": 1,
    "parentId": 2,
    "parentName": "workbench",
    "perms": "tbd",
    "type": 1,
    "url": "/warninglist",
    "_level": 2
  },{
    "icon": null,
    "list": null,
    "menuId": 38,
    "name": "artification",
    "open": null,
    "orderNum": 2,
    "parentId": 2,
    "parentName": "workbench",
    "perms": "tbd",
    "type": 1,
    "url": "/singnal",
    "_level": 2
  }]
}]