2021-10-06

使用饿了么ui中的el-table遇到的坑,以及解决办法

首先我要达成的效果是这样的

在elementui中的el-table正有该树状结构代码如下

<!-- 表格区域 -->
      <el-table class="treetable" :data="cateList" style="width: 100%" border  
       :row-key="getRow" :default-expand-all="false" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
         <!-- 序号 -->
        <el-table-column type="index" label="#" > </el-table-column>
        <!-- 分类名称 -->
        <el-table-column prop="cat_name" label="分类名称" style="width: 30%"> </el-table-column>
        <!-- 是否有效 -->
        <el-table-column label="是否有效" style="width: 30%">
            <template   slot-scope="scope">
              <i class="el-icon-success"  style="color: lightgreen" v-if="scope.row.cat_deleted === false" ></i>
            </template> 
        </el-table-column>
        <!-- 排序 -->
        <el-table-column  label="排序" style="width: 30%">
          <template slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
            <el-tag size="mini" type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
            <el-tag size="mini" type="warning" v-else>三级</el-tag>
          </template>
        </el-table-column>
        <!-- 操作 -->
         <el-table-column label="操作">
          <template  slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditCateDialog(scope.row.cat_id)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCate(scope.row.cat_id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

遇到的第一个坑就是如何变为多级结构,官方文档有详细描述

其中① :data=“cateList” 是需要展示的数据

​ ② :default-expand-all="false"是默认关闭子级行的

​ ③ :row-key=“getRow” 是用来展示多级结构每一行的key值要用回调的方式返回每一行的id作为独一无二的标记 ,刚好数组中每一行的cat_id就是每一行的id

<el-table :row-key="getRow"></el-table> 
...
methods: {  
    //row-key 的
    getRow(row){
      return row.cat_id
    },
    }

③ :tree-props="{children: ‘children’, hasChildren: ‘hasChildren’}"是树状展示属性(固定的格式)

以上三点都有就能展示一个多级结构的table了,此外有一个包也可以打成一样的效果,有兴趣的小伙伴可以尝试一下

报的名字是 vue-table-with-tree-grid