一、概述
官方链接:https://element.eleme.cn/#/zh-CN/component/table
官方效果:
二、demo演示
test.vue
<template>
<div>
<el-table
:data="tableData"
style="width: 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样式即可去掉,见上面的代码。