一、概述
官方链接: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>
访问页面,效果如下:
代码说明:
row-key="id" 指定每一行的唯一id,必须要指定,否则报错。
default-expand-all 默认展开
:tree-props="{children: 'children'}" 指定子节点的字段。我在tableData中,已经添加了children字段,所以它会遍历children里面的每一行数据。
上面代码中,定义了一个方法getTableIndex。主要是用来生成table的序列号的,其实table组件中,也可以生成序列号,但那不是我想要的。
我要求的是,必须是父节点,才有序号,子节点没有序号,不需要显示。
默认会有一个小三角符号,如果需要去掉,用css样式即可去掉,见上面的代码。