html表格展开收缩,展开和在HTML表格的第3级层级行收起

$("tbody > tr:not([data-level='3'])").addClass("expandable sign folded");

$("tbody > tr:not([data-level='1'])").hide();

$("tbody > tr")

.css("padding-left", function (index) {

return 10 * parseInt($(this).data("level"), 10) + "px";

});

function range(lowEnd, highEnd) {

// assert lowEnd >= 0 and highEnd < 100

var validation = (lowEnd <= highEnd) && (lowEnd >= 0) && (highEnd < 100);

if (!(validation)) {

console.assert(validation,

'Function "range" received unlikely values: ' +

lowEnd + ' and ' + highEnd + "...");

} else {

var arr = [];

while (lowEnd <= highEnd) {

arr.push(lowEn

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element Plus 的树形表格默认只支持展开,如果需要展开以上,需要进一些定制化操作。具体步骤如下: 1. 在表格的 columns 属性中,为需要展开的列(一般是第一列)添加 scopedSlot 插槽,并为插槽指定一个模板。 例如: ```html <template v-slot:default="{row}"> <span v-if="row.level === 0">{{ row.name }}</span> <span v-else-if="row.level === 1" style="padding-left: 20px">{{ row.name }}</span> <span v-else-if="row.level === 2" style="padding-left: 40px">{{ row.name }}</span> <span v-else style="padding-left: 60px">{{ row.name }}</span> </template> ``` 上述代码中,我们为第一列添加了一个 scopedSlot 插槽,根据数据的 level 属性来确定该的缩进量,从而实现展开及以上。 2. 在表格的 data 属性中,为每一数据添加一个 level 属性,用来标记该层级。 例如: ```js [ { name: '一 1', level: 0, children: [ { name: '二 1-1', level: 1, children: [ { name: '三 1-1-1', level: 2 }, { name: '三 1-1-2', level: 2 } ] }, { name: '二 1-2', level: 1, children: [ { name: '三 1-2-1', level: 2 }, { name: '三 1-2-2', level: 2 } ] } ] }, { name: '一 2', level: 0, children: [ { name: '二 2-1', level: 1, children: [ { name: '三 2-1-1', level: 2 }, { name: '三 2-1-2', level: 2 } ] }, { name: '二 2-2', level: 1, children: [ { name: '三 2-2-1', level: 2 }, { name: '三 2-2-2', level: 2 } ] } ] } ] ``` 上述代码中,我们为每一数据都添加了一个 level 属性,用来标记该层级。 通过以上两个步骤,我们就可以实现 Element Plus 树形表格的三及以上展开了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值