test11111

henghaheibiu

已于 2024-02-02 11:04:31 修改

阅读量133

点赞数 2

文章标签：前端 javascript html

于 2024-02-02 10:55:01 首次发布

本文链接：https://blog.csdn.net/henghaheibiu/article/details/135989219

版权


<template>
  <div>
    <el-tree
        ref="selectTree"
        :data="data"
        show-checkbox="true"
        default-expand-all
        :check-strictly="false"
        :default-checked-keys="[]"
        :props="defaultProps"
        :check-on-click-node="true"
        @check="handleCheckChange"
        node-key="id"
    >
      <template #default="{ node }">
        <span :title="node.label">
          <span>{{ node.label }}</span>
          <span
              v-if="node.checked"
              style="margin-left: 10px;"
              class="el-icon-check"
          ></span>
        </span>
      </template>
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 11,
              label: '二级 1-1',
              children: [
                {
                  id: 111,
                  label: '三级 1-1-1'
                },
                {
                  id: 112,
                  label: '三级 1-1-2'
                },
                {
                  id: 113,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 21,
              label: '二级 2-1'
            },
            {
              id: 22,
              label: '二级 2-2'
            }
          ]
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 31,
              label: '二级 3-1'
            },
            {
              id: 32,
              label: '二级 3-2',
              children: [
                {
                  id: 331,
                  label: '三级 3-1',
                  children: [
                    {
                      id: 3331,
                      label: '四级 3-1'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleCheckChange(event, node, data) {
      // 使用 getcheckednodes 方法获取选中的节点信息
      let checkedNodes = this.$refs.selectTree.getCheckedNodes();
      let length = 0;
      let parent;
      for(let i =0 ;i<checkedNodes.length;i++){
        let emuleng = (checkedNodes[i]["id"]+"").length;
        if(emuleng==2){
          length++;
        }
        if(checkedNodes[i]["id"]===2){
          parent = checkedNodes[i]["id"];
        }
      }
      console.log(checkedNodes);
      if (length > 2) {
        //给错误信息
        let one = checkedNodes[checkedNodes.length-1];
        this.$refs.selectTree.remove(one);
        this.$refs.selectTree.append(one,parent);
      }
    }
  }
}
</script>