element树表格默认打开

在网上参考了以下方法但并没有起效,考虑到渲染的问题进行了改造,加上了$nextTick
总的来说就是取class为el-table__expand-icon的结点进行了模拟点击,在你想要树展开的地方调用

expandAll () {
   const els = this.$el.getElementsByClassName('el-table__expand-icon')
   this.$nextTick(()=>{
       for (let i = 0; i < els.length; i++) {
          els[i].click()
       }
   })
}

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element UI 表格默认是按照第一列的升序排列的。如果需要按照其他列或者降序排列,可以通过设置 `sort-by` 和 `sort-direction` 属性来实现。 例如,如果需要按照第二列的降序排列,可以这样设置: ```html <el-table :data="tableData" :default-sort="{prop: 'column2', order: 'descending'}"> <el-table-column prop="column1" label="Column 1"></el-table-column> <el-table-column prop="column2" label="Column 2"></el-table-column> <el-table-column prop="column3" label="Column 3"></el-table-column> </el-table> ``` 其中,`:default-sort` 属性指定了默认排序的列和方向。`prop` 属性指定了列绑定的数据字段。 如果需要动态改变排序,可以在表格的 `sort-change` 事件中处理: ```html <el-table :data="tableData" :sort-by="sortColumn" :sort-direction="sortOrder" @sort-change="handleSortChange"> <el-table-column prop="column1" label="Column 1"></el-table-column> <el-table-column prop="column2" label="Column 2"></el-table-column> <el-table-column prop="column3" label="Column 3"></el-table-column> </el-table> ``` ```javascript export default { data() { return { tableData: [ { column1: 'A', column2: 3, column3: 'X' }, { column1: 'B', column2: 2, column3: 'Y' }, { column1: 'C', column2: 1, column3: 'Z' } ], sortColumn: 'column2', sortOrder: 'descending' } }, methods: { handleSortChange({ prop, order }) { this.sortColumn = prop; this.sortOrder = order; // 根据新的排序规则重新获取数据 // ... } } } ``` 在 `handleSortChange` 方法中,可以根据新的排序规则重新获取数据。其中,`prop` 表示排序的列名,`order` 表示排序的方向,可以是 `ascending` 或 `descending`。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值