ElementUI的el-checkbox的自定义使用

两年半前端练习生

已于 2023-11-16 16:19:50 修改

阅读量2.1k

点赞数

文章标签： elementui vue.js javascript

于 2023-11-15 10:01:19 首次发布

本文链接：https://blog.csdn.net/weixin_72205797/article/details/134413525

版权

样式效果：

html代码部分:

<el-checkbox v-model="CheckAll" label="全选" @change="handleCheckAllChangeSales"></el-checkbox>
    <el-checkbox-group v-model="Select" class="yetaixuan" @change="handleCheckedCitiesChange">
      <!-- el-checkbox 的label 是绑定值 基础用法 -->
      <el-checkbox v-for="(item, index) in tableData" :key="index" :label="item.val"></el-checkbox>

      <!-- 如果想获取到 选中的对象  {{item.val}} 为展示的选项 -->
      <!-- <el-checkbox v-for="(item, index) in tableData" :key="index" :label="item">{{item.val}}</el-checkbox> -->

</el-checkbox-group>

js部分:

<script>
export default {
  data() {
    return {
      CheckAll: false,// 全选框是否是勾选状态
      Select: [], //选中的数据
      // 多选框选项
      tableData: [
        { val: "多选框 一", id: 1 },
        { val: "多选框 二", id: 2 },
        { val: "多选框 三", id: 3 },
      ],
    };
  },
  methods: {
    //选择全选触发的事件 
    handleCheckAllChangeSales(bool) {
      // 如果是选中状态  bool为true  并把所有选项赋值给Arr
      // 如果是未选中状态 bool为false  把Arr赋值为空
      let Arr = bool ? this.tableData : [];
      // 如果Arr长度大于0
      if (Arr.length > 0) {
        // 把其他的选项赋值
        Arr.forEach((item) => {
          this.Select.push(item.val);
        });
        // 如果Arr长度小于等于0 把选项清空
      } else {
        this.Select = [];
      }
    },
    // 多选框绑定值改变时触发
    handleCheckedCitiesChange(value) {
      // value 为多选框选中的值 是一个数组
      let Selectlength = value.length;
      // 如果选择的值的数组长度 等于 选项数组的长度 全选框勾选状态为true
      this.CheckAll = Selectlength === this.tableData.length;
    },
  },
  watch: {
    // 侦听选中的值
    Select(newValue, oldValue) {
      console.log(newValue, '多选框选中选项');
    },
  },
};
</script>