效果：
组件table-tree代码（复制粘贴即可）：
<template>
<div class="myDiv">
<el-row style="margin:10px 0">
<el-col :span="22">
<el-button type="primary" size="mini" plain @click="expandLevel(0)">展开一级</el-button>
<el-button type="primary" size="mini" plain @click="expandLevel(1)">展开二级</el-button>
<el-button type="primary" size="mini" plain @click="expandLevel(2)">展开三级</el-button>
<el-button type="primary" size="mini" plain @click="expandLevel(3)">展开四级</el-button>
<el-button type="success" size="mini" plain @click="putAwayLevel(1)">全部收起</el-button>
</el-col>
</el-row>
<el-table ref="treeTable" :data="treeTableData" style="width: 100%" row-key="id" :expand-row-keys="expandId" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column show-overflow-tooltip :prop="item.prop" :width="item.width" :label="item.label" v-for="(item,i) in treeTableProps" :key="i">
<template slot-scope="scope">
<!-- 自定义数据-展示slot插槽 -->
<slot v-if="item.slot" :name="item.prop" :scope="scope">-</slot>
<!-- 非自定义处理(判空) -->
<span v-else-if="scope.row[item.prop] === '' || scope.row[item.prop] === null">-</span>
<!-- 非自定义处理(展示数组数据)-换行展示 -->
<div v-else-if="Array.isArray(scope.row[item.prop])==true">
<div v-for="aa in scope.row[item.prop]" ::key="aa">
{{aa}}
</div>
</div>
<!-- 非自定义处理(正常展示) -->
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
/**
* 树形表格切换按钮显示不同层级
*/
export default {
name: '',
components: {},
props: {
/** 表格数据 */
treeTableData: {
type: Array,
required: true,
},
/** 全部展开的表头 */
treeTableProps: {
type: Array,
required: true,
},
/** 是否显示导出 */
isShowExport: {
type: Boolean,
default: true,
required: true,
}
},
data() {
return {
expandNum: 0, //展开层级的数字
expandId: [],
}
},
created() {
},
watch: {
'expandNum': {
handler(newValue, oldValue) {
console.log(newValue, oldValue)
// 监听函数执行在methods函数执行之后。因此收起可覆盖展开，故展开函数不做处理
if (newValue < oldValue) { //当前选择的层级小于上一次选择的层级，就收起
this.putAwayLevel(newValue + 1)
}
},
deep: true
}
},
methods: {
/** 收起 */
putAwayLevel(num) {
let arr = this.treeToArray(this.treeTableData)//将树形数据转为一维数组，方便遍历
// 遍历收起当前层级
arr.map(row => {
if (num == row.level) {
this.$refs.treeTable.toggleRowExpansion(row, false);
}
})
// 下面递归调用目的是：假如你展开了4级，又点击展开2级，这时需要收起的是3级和4级，
// 不然它只收起的2级，点开2级的时候，3级其实也是展开的.
// 总结：展开2级，需要收起3级;展开1级，需要收起2、3级...
if (++num < 4) {
this.putAwayLevel(num)
}
},
/** 树形数据转为一维数组 */
treeToArray(arr) {
let data = JSON.parse(JSON.stringify(arr))
let newData = []
const callback = (item) => {
(item.children || (item.children = [])).map(v => {
callback(v)
})
delete item.children
newData.push(item)
}
data.map(v => callback(v))
return newData
},
/** 展开层级 */
expandLevel(i) {
this.expandNum = i
this.setExpandKeys(this.treeTableData, i)
},
/** 递归设置展开层级 */
setExpandKeys(dataList, num) {
--num;
if (num >= 0) {
for (var i = 0; i < dataList.length; i++) {
this.$refs.treeTable.toggleRowExpansion(dataList[i], true);
if (dataList[i].children) {
this.setExpandKeys(dataList[i].children, num);
}
}
}
},
},
mounted() { }
}
</script>
<style lang="scss" scoped>
::v-deep .el-table {
border: unset !important;
}
::v-deep .el-table::before,
.el-table--group::after,
.el-table--border::after {
background-color: unset !important;
}
// 给数组数据添加下边框
::v-deep .el-table__row--level-3 td:nth-child(5) {
.cell {
padding: 0 !important;
> div > div {
border-bottom: 1px solid #dfe6ec !important;
padding: 4px 10px !important;
&:nth-last-child(1) {
border-bottom: unset !important;
}
}
}
}
@media screen and (min-width: 200px) and (max-width: 1600px) {
}
@media screen and (min-width: 1601px) {
}
</style>父组件调用：
<template>
<div class="app-container home">
<TableTree :treeTableData="treeTableData" :treeTableProps="treeTableProps"/>
</div>
</template>
<script>
import TableTree from '../../components/base-table-tree-level/index'
export default {
name: 'index',
components: { TableTree },
data() {
return {
isShowExport: true,
treeTableData: [{
id: 1,
date: '快速反应能力水电费水电费水电费胜多负少的的说法是上厕所',
name: '',
address: '',
level: 1,
children: [{
id: 11,
date: '快速筹划',
name: '——',
address: '-',
level: 2,
children: [{
id: 111,
date: '方案计划齐全',
name: '-',
address: '-',
level: 3,
children: [{
id: 1111,
date: '四级11是的是的所多所多就看手机的看几十块的教科书的就开始几点开始就1',
name: '四级111',
address: '四级11是的是的所多所多就看手机的看几十块的教科书的就开始几点开始就1',
map: ['11', '22', '33'],
level: 4,
}, {
id: 1112,
date: '四级1',
name: '四级2',
address: '定量',
map: ['11', '22', '33'],
level: 4,
}, {
id: 1113,
date: '四级1',
name: '四级3',
address: '定量',
map: ['11', '22', '33'],
level: 4,
}, {
id: 1114,
date: '四级1',
name: '四级4',
address: '定量',
level: 4,
}]
}]
}]
}, {
id: 2,
date: '突发事件处理能力',
name: '-',
address: '-',
level: 1,
children: [{
id: 21,
date: '随机应变',
name: '-',
address: '-',
level: 2,
children: [{
id: 211,
date: '方案计划齐全',
name: '-',
address: '-',
level: 3,
children: [{
id: 2111,
date: '四级1',
name: '四级1',
level: 4,
address: '定量'
}]
}]
}]
}],
treeTableProps: [{ prop: 'date', label: '评估项目', width: '400'},
{ prop: 'address', label: '指标属性', width: '300' },
{ prop: 'address', label: '指标标准值', width: '300' },
{ prop: 'address', label: '指标属性', width: '300' },
{ prop: 'map', label: '采集要点', width: '300' }]
};
},
};
</script>
注意：效果图的表格样式没贴出来，自己定义就好。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之家整理，本文链接：https://www.bmabk.com/index.php/post/149673.html
