vue + el-select 组件封装,实现全选、反全选功能

本文介绍了如何在Vue项目中使用G-Select组件实现需求,如全选/反选功能以及详细的组件属性(如value、options、multiple等)设置。源码展示了组件的结构和方法,适用于处理多选列表中的选择逻辑。
摘要由CSDN通过智能技术生成

更新记录:

  • 2024-05-13:options 数据源支持传入字符串数组,会自动格式化成 { label: value } 数据。

一、需求

  1. 点击合计,一键全选。
  2. 当全选时,点击合计,一键反选。
    在这里插入图片描述
  3. 当选中01、02、03时,点击06选项会触发全选。
  4. 当全选时,点击除ALL的任一选项,会取消全选。
    在这里插入图片描述

二、应用

<template>
  <div class="content">
    <p>{{ value}}</p>
    <g-select
      v-model="value"
      :options="list"
      allProp="ALL"
      multiple
      val_lab
      :filter="{ label: 'classname', value: 'classcode' }"
      @change="selectChange"
    ></g-select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      list: [
        { classname: "合计", classcode: "ALL" },
        { classname: "企业财产保险", classcode: "01" },
        { classname: "普通家财保险", classcode: "02" },
        { classname: "工程保险", classcode: "03" },
        { classname: "普通意外保险", classcode: "06" },
      ],
    };
  },
  methods: {
    selectChange(list) {
      console.log(this.value, list);
    },
  },
};
</script>

三、源码

g-select.vue
<template>
  <div class="select-container">
    <el-select
      v-model="val"
      :size="size"
      :loading="loading"
      :multiple="multiple"
      :disabled="disabled"
      :value-key="filter.value"
      :filterable="filterable"
      :placeholder="placeholder || '请选择'"
      :clearable="clearable"
      collapse-tags
      :style="{ width }"
      @clear="handleClear"
      @remove-tag="removeTag"
      @change="handleChange($event)"
    >
      <el-option
        class="option"
        v-for="(item, index) in list"
        :key="index"
        :label="
          (val_lab ? item[filter.value] + ' - ' : '') + item[filter.label]
        "
        :value="item[filter.value]"
        @click.native="optionClick(item)"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  model: {
    prop: "value",
    event: "input",
  },
  props: {
    value: [String, Number, Array],
    width: {
      type: String,
      default: "220px",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "small",
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    // 是否可搜索
    filterable: {
      type: Boolean,
      default: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    options: {
      type: Array,
      default: () => [],
    },
    placeholder: {
      type: String,
      default: "",
    },
    // 全选选项值
    allProp: {
      type: String,
      default: "ALL",
    },
    // 显示内容是否包含值
    val_lab: {
      type: Boolean,
      default: false,
    },
    filter: {
      type: Object,
      default: () => {
        return {
          label: "label",
          value: "value",
        };
      },
    },
    // 数据格式化
    init: {
      type: Function,
      default: (list) => {
      	if (Array.isArray(list) && !list.find((v) => typeof v != "string")) {
          return list.map((v) => {
            return { label: v, value: v };
          });
        }
        return false;
      },
    },
  },
  data() {
    return {
      val: "",
      list: [],
    };
  },
  watch: {
    value: {
      handler(val) {
        this.val = val || (this.multiple ? [] : "");
      },
      immediate: true,
    },
    options: {
      handler(val) {
        this.list = val;
        if (!val.length) this.val = this.multiple ? [] : "";
        let initList = this.init(this.list);
        if (initList) this.list = initList;
      },
      deep: true,
    },
  },
  mounted() {
    this.list = this.options || [];
    let initList = this.init(this.list);
    if (initList) this.list = initList;
  },
  methods: {
    handleChange(value) {
      this.val = value;
      this.$emit("input", this.val);
    },
    optionClick(info) {
      let lis = [];
      if (this.multiple) {
        if (this.list.find((v) => v[this.filter.value] == this.allProp)) {
          if (info[this.filter.value] == this.allProp) {
            // 取消全选
            if (this.val.length == this.list.length - 1 && !this.val.includes(this.allProp)) {
              this.val = [];
            } else {
              // 点击全选
              this.val = this.list.map((v) => v[this.filter.value]);
              lis = this.list;
            }
          } else {
            if (this.val.length == this.list.length - 1) {
              // 要把全选选项去掉
              if (this.val.includes(this.allProp)) this.val.shift();
              // 要把全选选项勾上
              else this.val.unshift(this.allProp); // 反向全选
            }
          }
        }
        lis = this.list.filter((v) => this.val.includes(v[this.filter.value]));
      } else lis = info;
      this.$emit("input", this.val);
      this.$emit("change", lis);
    },
    removeTag(val) {
      // val 为关闭的标签
      if (val == this.allProp) this.val = [];
      let lis = this.list.filter((v) =>
        this.val.includes(v[this.filter.value])
      );
      this.$emit("input", this.val);
      this.$emit("change", lis);
    },
    handleClear() {
      this.$emit("clear");
      this.$emit("input", this.val);
      this.$emit("change", this.multiple ? [] : null);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-select .el-tag {
  max-width: 70%;
}
// .option {
//   height: 40px;
//   font-size: 14px;
//   line-height: 40px;
// }
</style>

四、使用说明

props
  • value:v-model绑定值。
  • options:数据源。
  • multiple:是否多选。
  • allProp:全选选项值。(默认 ALL)
  • filter:自定义显示的 key名称 和使用的 value值。(默认 label value)
  • disabled:是否禁用。
  • val_lab:是否 value key组合显示。(默认只显示 key)
  • loading:是否正在从远程获取数据。
  • placeholder:占位符。
  • width:组件宽度,需要带单位。(默认 200px)
  • size:输入框尺寸。(默认 small)
  • clearable:是否可以清空选项。(默认 true)
  • filterable:是否可搜索。(默认 true)
  • init:数据格式化函数。
Event
  • change:选中值发生变化时触发。(list) => {}
    • list:选中的数据。单选为 Object,多选时为 Array。

目前实现了基本的全选需求,大家如果有更加细致的需求可以参考文档自行增删改。

Vue.js是一种流行的JavaScript框架,用于构建界面。它采用了组件化的开发方式,使得开发者可以将页面拆分成多个独立的组件,每个组件都有自己的逻辑和样式。Vue.js具有简单易学、灵活高效的特点,因此在前端开发中得到了广泛应用。 在Vue.js中,el-select是一个下拉选择框组件,可以用于实现单选或多选功能。要实现el-select的多选加全选功能,可以通过以下步骤进行: 1. 在Vue组件中引入el-select组件,并设置multiple属性为true,表示启用多选功能。 2. 使用v-model指令绑定一个数组类型的数据,用于存储用户选择的选项。 3. 添加一个全选选项,并使用v-model指令将其与一个布尔类型的数据进行绑定。 4. 监听全选选项的变化,当全选选项被选中时,将所有选项添加到已选择的选项数组中;当全选选项取消选中时,清空已选择的选项数组。 下面是一个示例代码,演示了如何实现el-select的多选加全选功能: ```html <template> <div> <el-select v-model="selectedOptions" multiple> <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option> </el-select> <el-checkbox v-model="selectAll">全选</el-checkbox> </div> </template> <script> export default { data() { return { options: [ { label: '选项1', value: 'option1' }, { label: '选项2', value: 'option2' }, { label: '选项3', value: 'option3' }, // 其他选项... ], selectedOptions: [], selectAll: false }; }, watch: { selectAll(value) { if (value) { this.selectedOptions = this.options.map(option => option.value); } else { this.selectedOptions = []; } } } }; </script> ``` 在上述代码中,options数组存储了所有的选项,selectedOptions数组存储了用户选择的选项,selectAll变量表示全选选项的状态。通过监听selectAll的变化,可以实现全选功能
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值