添加用户权限控制

zhangzengfei

2021-11-17 5186227a467bd34dc253e64b23bc96d3a07bb399

 src/components/SelectTree/index.vue

@@ -32,132 +32,132 @@

<script>
  export default {
    name: 'SelectTreeTemplate',
  name: "SelectTreeTemplate",
    props: {
      /* 树形结构数据 */
      treeOptions: {
        type: Array,
        default: () => {
          return []
        return [];
        },
      },
      /* 单选/多选 */
      selectType: {
        type: String,
        default: () => {
          return 'single'
        return "single";
        },
      },
      /* 初始选中值key */
      selectedKey: {
        type: String,
        default: () => {
          return ''
        return "";
        },
      },
      /* 初始选中值name */
      selectedValue: {
        type: String,
        default: () => {
          return ''
        return "";
        },
      },
      /* 可做选择的层级 */
      selectLevel: {
        type: [String, Number],
        default: () => {
          return ''
        return "";
        },
      },
      /* 可清空选项 */
      clearable: {
        type: Boolean,
        default: () => {
          return true
        return true;
        },
      },
    },
    data() {
      return {
        defaultProps: {
          children: 'children',
          label: 'name',
        children: "children",
        label: "name",
        },
        defaultSelectedKeys: [], //初始选中值数组
        currentNodeKey: this.selectedKey,
        selectValue:
          this.selectType == 'multiple'
            ? this.selectedValue.split(',')
        this.selectType == "multiple"
          ? this.selectedValue.split(",")
            : this.selectedValue, //下拉框选中值label
        selectKey:
          this.selectType == 'multiple'
            ? this.selectedKey.split(',')
        this.selectType == "multiple"
          ? this.selectedKey.split(",")
            : this.selectedKey, //下拉框选中值value
      }
    };
    },
    mounted() {
      const that = this
      this.initTree()
    const that = this;
    this.initTree();
    },
    methods: {
      // 初始化树的值
      initTree() {
        const that = this
      const that = this;
        if (that.selectedKey) {
          that.defaultSelectedKeys = that.selectedKey.split(',') // 设置默认展开
          if (that.selectType == 'single') {
            that.$refs.treeOption.setCurrentKey(that.selectedKey) // 设置默认选中
        that.defaultSelectedKeys = that.selectedKey.split(","); // 设置默认展开
        if (that.selectType == "single") {
          that.$refs.treeOption.setCurrentKey(that.selectedKey); // 设置默认选中
          } else {
            that.$refs.treeOption.setCheckedKeys(that.defaultSelectedKeys)
          that.$refs.treeOption.setCheckedKeys(that.defaultSelectedKeys);
          }
        }
      },
      // 清除选中
      clearHandle() {
        const that = this
        this.selectValue = ''
        this.selectKey = ''
        this.defaultSelectedKeys = []
        this.currentNodeKey = ''
        this.clearSelected()
        if (that.selectType == 'single') {
          that.$refs.treeOption.setCurrentKey('') // 设置默认选中
      const that = this;
      this.selectValue = "";
      this.selectKey = "";
      this.defaultSelectedKeys = [];
      this.currentNodeKey = "";
      this.clearSelected();
      if (that.selectType == "single") {
        that.$refs.treeOption.setCurrentKey(""); // 设置默认选中
        } else {
          that.$refs.treeOption.setCheckedKeys([])
        that.$refs.treeOption.setCheckedKeys([]);
        }
      },
      /* 清空选中样式 */
      clearSelected() {
        const allNode = document.querySelectorAll('#treeOption .el-tree-node')
        allNode.forEach((element) => element.classList.remove('is-current'))
      const allNode = document.querySelectorAll("#treeOption .el-tree-node");
      allNode.forEach((element) => element.classList.remove("is-current"));
      },
      // select多选时移除某项操作
      removeTag(val) {
        this.$refs.treeOption.setCheckedKeys([])
      this.$refs.treeOption.setCheckedKeys([]);
      },
      // 点击叶子节点
      nodeClick(data, node, el) {
        if (data.rank >= this.selectLevel) {
          this.selectValue = data.name
          this.selectKey = data.id
        this.selectValue = data.name;
        this.selectKey = data.id;
        }
      },
      // 节点选中操作
      checkNode(data, node, el) {
        const checkedNodes = this.$refs.treeOption.getCheckedNodes()
        const keyArr = []
        const valueArr = []
      const checkedNodes = this.$refs.treeOption.getCheckedNodes();
      const keyArr = [];
      const valueArr = [];
        checkedNodes.forEach((item) => {
          if (item.rank >= this.selectLevel) {
            keyArr.push(item.id)
            valueArr.push(item.name)
          keyArr.push(item.id);
          valueArr.push(item.name);
          }
        })
        this.selectValue = valueArr
        this.selectKey = keyArr
      });
      this.selectValue = valueArr;
      this.selectKey = keyArr;
      },
    },
  }
};
</script>

<style lang="scss" scoped>