el-table树状表格画指示线

552 阅读1分钟
          <el-table-column prop="code" label="" :show-overflow-tooltip="true" sortable>
            <template slot-scope="scope">
              <template v-for="(item,l) in scope.row.level">
                <span
                  v-if="scope.row.delFlag && scope.row.delFlag[l] == 'false'"
                  :key="l+1"
                  class="l_bor1_box"
                  :style="{'left':`${l*16}`+'px'}"
                ></span>

                <span
                  v-if="l == (scope.row.level -1)"
                  :key="(l+1)*10000"
                  class="l_bor2_box"
                  :style="{'left':`${l*16}`+'px'}"
                ></span>
              </template>

              <span
                v-if="scope.row.moreOneDash"
                class="more_dash"
                :style="{'left':`${(scope.row.level)*16 - 6}`+'px'}"
              ></span>

              <span class="showName">{{ scope.row.code }}</span>
            </template>
          </el-table-column>
  setLine() {
      let tableData = this.tableDate  //获取树状表格的数据执行这里的方法
      function setLevel(arr, levelNum) {
        for (let j = 0; j < arr.length; j++) {
          const element = arr[j];
          element['level'] = levelNum;
          if (element.children.length) {
            setLevel(element.children, levelNum + 1);
          }
        }
      }
      setLevel(tableData, 1);
      function set_setLast(arr) {
        for (let j = 0; j < arr.length; j++) {
          const element = arr[j];
          if (element.children.length == 0) {
            if (j == arr.length - 1) {
              element['iszhongjian'] = true;
              // if ((element.shuju == null || element.shuju == 'null') && element.childNode.length > 0) {
              //   element['iszhongjian'] = true
              // } else {
              //   element['iszhongjian'] = false
              // }
            } else {
              element['iszhongjian'] = false;
            }
          } else {
            if (j == arr.length - 1) {
              element['iszhongjian'] = true;
              // if ((element.shuju == null || element.shuju == 'null') && element.childNode.length > 0) {
              //   element['iszhongjian'] = true
              // } else {
              //   element['iszhongjian'] = false
              // }
            } else {
              element['iszhongjian'] = false;
            }
            set_setLast(element.children);
          }
        }
      }
      // console.log(this.tableData[0].childNode)
      
      function set_setLastAll(arr) {
        for (let j = 0; j < arr.length; j++) {
          const element = arr[j];
          set_setLast(element.children);
          element['iszhongjian'] = true;
        }
      }
      set_setLastAll(tableData);
      // 第二步 根据iszhongjian和所需要删除的层次level 递归遍历 将需要删除虚线的标志为true fasle是不删 将几条虚线删不删的值放在一个数组内
      function delArrItem(arr, flagDel, num, farArr) {
        for (let j = 0; j < arr.length; j++) {
          const element = arr[j];
          let delFlag = JSON.parse(JSON.stringify(farArr)); // 必须深拷贝 将父级的数组继承到子集使用 深拷贝 才不会改变父级数组值
          for (let h = 0; h < element.level; h++) {
            if (flagDel == 'true' || flagDel == true) {
              if (h + 1 == num) {
                delFlag[h] = 'true';
              } else {
                if (delFlag[h] == 'true' || delFlag[h] == true) {
                  // 针对需要删除的 就不要再赋值
                } else {
                  delFlag[h] = 'false';
                }
              }
            } else {
              if (delFlag[h] == 'true' || delFlag[h] == true) {
              } else {
                delFlag[h] = 'false';
              }
            }
          }
          element['delFlag'] = delFlag;

          if (element.children.length == 0) {
          } else {
            delArrItem(
              element.children,
              element.iszhongjian,
              element.level,
              element['delItemFlag']
            );
          }
        }
      }

      function delArrItemAll(arr) {
        for (let j = 0; j < arr.length; j++) {
          const element = arr[j];
          delArrItem(element.children, false, 0, []);
        }
      }
      delArrItemAll(tableData);
       function set_lastMoreDash (arr) {
        for (let j = 0; j < arr.length; j++) {
          const element = arr[j]
          if (element.childNode.length == 0) {
            if (j == (arr.length - 1)) {
              element['moreOneDash'] = true
            } else {
              element['moreOneDash'] = false
            }
          } else {
            if (j == (arr.length - 1)) {
              element['moreOneDash'] = true
            } else {
              element['moreOneDash'] = false
            }
            set_lastMoreDash(element.childNode)
          }
        }
      }

            function set_lastMoreDashAll(arr) {
        for (let j = 0; j < arr.length; j++) {
             const element = arr[j];
             set_lastMoreDash(element.childNode)
        }
      }
      set_lastMoreDashAll(tableData);
 
    },