前端基础学习-el-checkbox-group实现全选

前端基础学习-el-checkbox-group实现全选

其实这一块在element有具体说明

这里想要补充的一点是，checkbox勾选的数组中的数据项绑定的是label，在我的代码里多了一个对绑定label对应数据的过滤
先看一下效果

我这里checkbox中label绑定的是name
那么我要实现全选的效果，需要将我原数组中的所有数据项的name过滤组成一个新数组，再将其赋值给选中的数组

<template>
  <div>
    <el-dialog title="发送人员" :visible.sync="sendVisible" width="27%" @close="handelClose">
      <el-form :model="sendForm" ref="sendForm" :rules="rules">
        <el-form-item prop="usersList" label="">
          <div style="width:97%;background-color:#F8F8F9;padding-left:3%;border:1px solid #DEDFE3">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          </div>
          <!-- 这里设置height，后面overflow滚动条才有用 -->
          <div style="border:1px solid #DEDFE3;border-top: none;padding-left:3%;width:97%;height:300px;">
            <el-checkbox-group v-model="sendForm.usersList" @change="changeChecked" style="overflow-y: auto;height:100%;max-height:100%">
              <el-checkbox v-for="item in userArr" :key="item.id" :label="item.name" style="width:30%;margin-right:0"></el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handelClose">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    memberList: {
      type: Array
    }
  },
  data () {
    return {
      sendVisible: false,
      // checkbox全选
      isIndeterminate: true,
      checkAll: false,
      userArr: [],
      nameArr: [],
      sendForm: {
        usersList: []
      },
      rules: {
        usersList: [
          { required: true, message: '请勾选用户', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    sendVisible: {
      handler (visible) {
        if (visible) {
          this.userArr = this.memberList
          // 勾选的数组绑定的是数组中的item.name(label),这里要过滤出全为name的数组
          let tempNameArr = []
          this.memberList.forEach(item => {
            tempNameArr.push(item.name)
          })
          this.nameArr = tempNameArr
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted () {
  },
  methods: {
    changeChecked (value) {
      // console.log(value, '勾选value')
      let checkedCount = value.length
      this.checkAll = checkedCount === this.nameArr.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.nameArr.length
    },
    handleCheckAllChange (val) {
      // console.log(val, '全选value')
      this.sendForm.usersList = val ? this.nameArr : []
      this.isIndeterminate = false
    },
    handleConfirm () {
      this.$refs['sendForm'].validate((valid) => {
        if (valid) {
          this.$message.success('发送成功！')
          this.$emit('memSend')
          this.sendVisible = false
        }
      })
    },
    handelClose () {
      this.sendVisible = false
      this.$refs.sendForm.resetFields()
    }
  }
}
</script>

<style>

</style>

这里的memberList是父组件传来的list