vue：遇到的坑之-----el-select/el-tree 下拉选项全选 反选（element-ui）

el-select效果图：

html： 

<el-select filterable multiple collapse-tags v-model="selectData" @change="selectBox" @visible-change="visiblechangeOption" placeholder="请选择">
    <el-checkbox v-model="isSelectAll" style="padding-left:18px" @change="selectAll">全选</el-checkbox>
    <el-checkbox v-model="isSelectReverse" style="padding-left:18px" @change="selectReverse">反选</el-checkbox>
    <el-option v-for="item in options" :key="item.id" :value="item.id" :label="item.title"></el-option>
</el-select>

注：我这里用@visible-change 而不是@change 是因为 选中改变后会发送请求，为了避免频繁的向后台发送请求 就换成visible-change了，当然也可以用change；然后我这里change也绑定了事件，用来判断全选是否被选中，可以把visiblechange里的代码挪到change里 不影响的

data() {
    return {
        isSelectAll: false,
        isSelectReverse: false,
        options: [
            {
              id: "1",
              title: "aaaaa",
            },
            {
              id: "2",
              title: "bbbb",
            },
            {
              id: "3",
              title: "ccccc",
            },
          ],
        selectData: [],
    }
}

methods:{
    // 全选
    selectAll(val) {
      if (val) {
        this.selectData = []
        this.options.every(i => this.selectData.push(i.id))
        if (this.isSelectReverse) {
          this.isSelectReverse = false
        } 
        
      } else {
        this.selectData = []
      }
      this.selectBox()
    },

    // 反选
    selectReverse(val) {
      if (val && this.isSelectAll) {
        this.isSelectAll = false
      }
      let curSelect = [...this.selectData]
      let idSet = curSelect.reduce((pre, cur) => {
          pre[cur] = true;
          return pre;
      }, {});
      // 遍历全部，去掉在idSet中存在的id
      let result = this.options.filter(i => !idSet[i.id]);
      let temp = []
      result.every(z => temp.push(z.id))
      this.selectData = temp
      
      this.selectBox()
    },

    // 操作完后发送请求之类的后续操作
    visiblechangeOption(val) {
      if (!val) {
        // dosomething.... 
      }
    },

    // 全选控制
    selectBox() {
      if (this.selectData && this.selectData.length == this.options.length) {
        this.isSelectAll = true
      } else {
        this.isSelectAll = false
      }
    },


}

------------------------------------------

 el-tree效果图：

html：

<div>
    <el-checkbox
        v-model="isSelectAll"
        style="padding-left: 18px"
        @change="selectAll"
        >全选</el-checkbox
    >
    <el-checkbox
        v-model="isSelectReverse"
        style="padding-left: 18px"
        @change="selectReverse"
        >反选</el-checkbox
    >
    <el-tree
      ref="tree"
      :expand-on-click-node="false"
      show-checkbox
      :data="treeData"
      default-expand-all
      :props="defaultProps"
      node-key="id"
      @check="changeOption"
    >
    </el-tree>
</div>

 data：

treeData: [
    {
      id: 1,
      label: "一级 1",
      children: [
        {
          id: 4,
          label: "二级 1-1",
        },
      ],
    },
    {
      id: 2,
      label: "一级 2",
      children: [
        {
          id: 5,
          label: "二级 2-1",
        },
        {
          id: 6,
          label: "二级 2-2",
        },
      ],
    },
    {
      id: 3,
      label: "一级 3",
    },
],
defaultProps: {
    children: "children",
    label: "label",
},
treeItems: [], // 将数据都变为平级
treeIds: [], // 所有数据的id
allItemLength: 0, // 所有数据的长度
isSelectAll: false,
isSelectReverse: false

created() {
// 这一串代码可以放在请求获取树数据后进行操作
    let treeIds = []
    let treeItems = []
    let sum = 0
    this.treeData.forEach(i => {
      sum++
      if (i.children && i.children.length > 0) {
        i.children.forEach(j => {
          treeIds.push(j.id)
          treeItems.push(j)
        })
        sum = sum + i.children.length
      } else {
        treeIds.push(i.id)
        treeItems.push(i)
      }
    })
    // 因为树结构 涉及到勾选父，子也会被全部选中，是有关联的，所有把数据扁平化会更好处理一些
    this.allItemLength = sum
    this.treeIds = treeIds
    this.treeItems = treeItems
},

methods: {
     // 全选
    selectAll(val) {
      if (val) {
        this.$refs.tree.setCheckedKeys(this.treeIds)
        if (this.isSelectReverse) {
          this.isSelectReverse = false
        } 
      } else {
        // 置空
        this.$refs.tree.setCheckedKeys([])
      }
    },

    // 反选
    selectReverse(val) {
      if (val && this.isSelectAll) {
        this.isSelectAll = false
      }
      // 原理同下拉框
      let temIdSet = this.$refs.tree.getCheckedKeys().reduce((pre, cur) => {
        pre[cur] = true
        return pre
      }, {})
      let result = this.treeItems.filter(i => !temIdSet[i.id])
      let tem = []
      result.every(j =>tem.push(j.id))
      this.$refs.tree.setCheckedKeys(tem)
      // 判断是否数据都被选中 使全选框选中
      if (this.$refs.tree.getCheckedKeys() && this.$refs.tree.getCheckedKeys().length == this.allItemLength) {
        this.isSelectAll = true
      }
    },

    // 手动选中某一项
    changeOption(data, item) {
      // 判断是否所有数据都被选中
      if (item.checkedKeys.length == this.allItemLength) {
        this.isSelectAll = true
      } else {
        this.isSelectAll = false
      }
    },

}

好啦~

有问题欢迎留言=3=