• ElementUI table树形数据


    一、概述

    官方链接:https://element.eleme.cn/#/zh-CN/component/table

    官方效果:

    二、demo演示

    test.vue

    <template>
      <div>
        <el-table
          :data="tableData"
          style=" 100%;margin-bottom: 20px;"
          row-key="id"
          default-expand-all
          :tree-props="{children: 'children'}">
          <el-table-column type="index" label="序号" width="50">
            <template slot-scope="scope">
              <span v-if="scope.row.children">{{scope.row.index}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="日期"
            sortable
            width="180">
            <template slot-scope="scope">
              <div v-if="scope.row.children" style="display: inline-block;margin 0">
                <span>{{scope.row.date}}</span>
                <span v-if="scope.row.type" style="color: red">{{scope.row.type}}</span>
              </div>
              <div v-else style="display: inline-block;margin 0;color: #999999">
                <i class="el-icon-caret-right"></i>
                <span>{{scope.row.date}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            sortable
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
        </el-table>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            indexList:[],
            tableData: [{
              id: 1,
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄',
              type:'',
              children:[]
            }, {
              id: 2,
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄',
              type:'',
              children:[]
            }, {
              id: 3,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
              type:'',
              children: [{
                id: 31,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }, {
                id: 32,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }]
            }, {
              id: 4,
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄',
              type:'',
              children: [{
                id: 41,
                date: '2016-05-01',
                name: '王小虎41',
                address: '上海市普陀区金沙江路 1520 弄'
              }, {
                id: 42,
                date: '2016-05-01',
                name: '王小虎42',
                address: '上海市普陀区金沙江路 1521 弄'
              }]
            }],
            tableData1: [{
              id: 1,
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄',
              type:'',
              children:[]
            }, {
              id: 2,
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄',
              type:'',
              children:[]
            }, {
              id: 3,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
              hasChildren: true,
              type:'',
              children:[]
            }, {
              id: 4,
              date: '2016-05-03',
              name: '王小虎4',
              address: '上海市普陀区金沙江路 1516 弄',
              type:'',
    
            }]
          }
        },
        mounted() {
          this.getTableIndex()
        },
        methods: {
          // 获取index
          getTableIndex(){
            this.indexList=[]
            let index=0
            for (let val of this.tableData) {
              if(val.children){
                // console.log(val.id)
                index+=1
                val.index=index
              }
            }
            // console.log(this.indexList)
          },
        },
      }
    </script>
    <style rel="stylesheet/scss" lang="scss" scoped>
      /deep/ .el-table__placeholder {
        display: inline-block;
        width: 20px;
        padding-left: -35px;
        margin-left: -16px;
      }
      /*去除三角符号*/
      /deep/ .el-table .el-table__expand-icon {
        display: none;
        width: 20px;
        line-height: 20px;
        height: 20px;
        text-align: center;
        margin-right: 3px;
      }
    </style>
    View Code

    访问页面,效果如下:

    代码说明:

    row-key="id" 指定每一行的唯一id,必须要指定,否则报错。

    default-expand-all 默认展开

    :tree-props="{children: 'children'}" 指定子节点的字段。我在tableData中,已经添加了children字段,所以它会遍历children里面的每一行数据。

    上面代码中,定义了一个方法getTableIndex。主要是用来生成table的序列号的,其实table组件中,也可以生成序列号,但那不是我想要的。

    我要求的是,必须是父节点,才有序号,子节点没有序号,不需要显示。

    默认会有一个小三角符号,如果需要去掉,用css样式即可去掉,见上面的代码。

  • 相关阅读:
    关于DOM事件操作
    js 去掉字符串前后空格
    oracle创建表索引
    导入Excel -- 套路及代码分析
    漫谈五种IO模型(主讲IO多路复用)
    Reactor模式
    jvm
    Python入门学习资料推荐
    ConcurrentHashMap & Hashtable
    分布式系统的接口幂等性设计
  • 原文地址:https://www.cnblogs.com/xiao987334176/p/15976454.html
Copyright © 2020-2023  润新知