el-table-column type=“expand“ 无数据时不展示实现过程（指定行展示）

@颜究生

已于 2023-03-21 17:48:16 修改

阅读量1.8k

点赞数

文章标签： vue.js 前端 javascript

于 2023-03-21 17:42:43 首次发布

本文链接：https://blog.csdn.net/m0_53871713/article/details/129693510

版权

文章讲述了如何在Vue.js应用中使用el-table组件，通过设置row-key和expand-row-keys属性来管理表格行的标识和展开状态。数据绑定到row-key和expand-row-keys，使用getRowKeys方法返回行的唯一key（num）。在created生命周期钩子中调用expandRows方法初始化展开的行，特别是当资产有子设备时。

摘要由CSDN通过智能技术生成

效果如下：

添加 row-key 和 expand-row-keys 两个属性

<el-table
      :row-class-name="getRowClass"
      :row-key="getRowKeys"
      :expand-row-keys="expands"
      v-loading="loading"
      :data="assetList"
      style="width: 98%; margin: 0 auto; border: 1px solid #ccc"
      ref="shake"
    >

expand 保存的是每行的num值（this.assetList[i].num）

data() {
    return {
      // 要展开子数据的行，数值的元素是row的key值
      expands: [],
      // 每一行的key值
      getRowKeys(row) {
        return row.num;
      },
    }
}

this.expands.push(item.num); 把符合条件的行的key值 (此处为：num) 添加到数组expands

methods: {
    // 添加默认展开行
    expandRows() {
      // 换页时置空数组
      this.expands = []
      // 给每行添加key值(num)
      for (let i = 0; i < this.assetList.length; i++) {
        this.assetList[i].num = i;
      }
      // 添加默认展开行
      this.assetList.forEach((item) => {
        if (item.asset.是否有子设备) {
          this.expands.push(item.num);
        }
      });
    },
}

在获取数据时就调用此函数（created）