el-table expand-change 每次只展开一行

1,033 阅读1分钟

首先我们需要在el-table上加入这些属性

        row-key="id" //行唯一key
        :expand-row-keys="expands" //展开行id数组,且值为string
        @expand-change="expandSelect" //展开关闭监听

expands的值要与row-key值对应, 然后在expandSelect去实现相应操作、

下附完整实列

   let expands = ref([]);
   let exarr = ref([]); // 存放对应展开的层级[1级,2级···]
   const expandSelect = (row, expandedRows) => {
     if (row.children.length > 0 && expandedRows) {
         // 判断当前exarr内是否有同层被展开
         let rep = exarr.value.some((item) => {
           return item == row.level;
         });
         if (rep) {
             // 关闭其他子层级
             exarr.value = exarr.value.filter((item) => {
               return item <= row.level;
             });
             // 删除同级和子展开行id,将新的展开行id再赋值进去
             expands.value =
             row.level == 1 ? [row.id + ""] : expands.value.slice(0, exarr.value.length - 1).concat(row.id + "");
         } else {
             exarr.value.push(row.level);
             expands.value.push(row.id + "");
         }
     }
   };

row是当前行数据, expandedRows为展开还是关闭。