el-table实现展开当前行时收起上一行的功能

el-table实现展开当前行时收起上一行的功能_第1张图片el-table实现展开当前行时收起上一行的功能_第2张图片



props: {
 idName: {
      type: String,
      default: "id",
    }, // 表格行的唯一标识
},

data() {
    return {
      ids: [], // 选中的行的ids数组
      expandRowKeys: [], // 存储展开行的 keys
    };
  },

  methods: {
     handleRowKey(row) {
      return row[this.idName];
    },


 /**
     * @Event 当用户对某一行展开或者关闭的时候会触发该事件
     * @description: 展开行时,回调的第二个参数为 expandedRows;树形表格时第二参数为 expanded
     * @author: mhf
     * @time: 2023-11-12 14:08:29
     **/
    handleExpandChange(row) {
      const rowKey = row[this.idName]; // 如果不写idName可以自己指定,如 rowKey = "id"
      if (this.expandRowKeys === [] || this.expandRowKeys.length === 0) {
        // 如果没有行展开,则添加当前行的 key 到 expandRowKeys 中
        this.expandRowKeys.push(rowKey);
      } else {
        // 如果已经有行被展开,就收起上一行
        if (this.expandRowKeys.includes(rowKey)) {
          // 如何再次点击当前行,就收起当前行
          this.expandRowKeys = [];
        } else {
          // 第一次点击这一行,就将当前行的 key 放入 expandRowKeys 中
          this.expandRowKeys = [rowKey];
        }
      }
    },
}

你可能感兴趣的:(vue项目中常用操作,后台管理系统,组件封装,vue.js,javascript,前端)