vue树形多列_vue+element-ui实现可折叠的树形表格

这篇博客介绍了如何利用Element-UI的特性,结合Vue.js,来构建一个支持多级展示并可折叠的树形表格。通过自定义组件,实现了数据源的格式化、行展示控制、展开折叠功能以及图标显示。文章中包含关键方法如`toggleExpanded`用于切换子项的展开状态,以及样式设计,确保了交互效果的平滑。
摘要由CSDN通过智能技术生成

//利用element-ui的 属性,在插入多级表格

{ {scope.$index}}

{ {scope.row[column.value]}}

name:'treeTable',

props: {

data: {

type: [Array, Object],

required:true},

columns: {

type: Array,default: ()=>[]

},

evalFunc: Function,

evalArgs: Array,

expandAll: {

type: Boolean,default:false}

},

computed: {//格式化数据源

formatData:function() {

let tmpif(!Array.isArray(this.data)) {

tmp=[this.data]

}else{

tmp= this.data

}

const func= this.evalFunc||treeToArray

const args= this.evalArgs?Array.concat([tmp,this.expandAll],this.evalArgs) : [tmp,this.expandAll]returnfunc.apply(null, args)

}

},

methods: {

showRow:fun

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值