组件二次封装-下拉框中进行复选框的勾选

发表于 更新于 分类于

图示

组件使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<el-form ref="form" :model="conditionForm" label-width="80px">
  <condition-select
    :max="5"
    type="text"
    autocomplete="on"
    :disabled="loading"
    v-model="conditionForm.type"
    placeholder="请选择***类型"
    @selectSure="selectSure"
  >
    <condition-option
      v-for="item in list"
      :key="item.id"
      :label="item.value"
      :value="item.id"
    ></condition-option>
  </condition-select>
</el-form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import ConditionSelect from "@/components/ConditionForm/ConditionSelect";
import ConditionOption from "@/components/ConditionForm/ConditionOption";

export default {
  data() {
    return {
      list: [
        { id: 1, value: "a" },
        { id: 2, value: "b" },
        { id: 3, value: "c" },
        { id: 4, value: "d" },
        { id: 5, value: "e" },
        { id: 6, value: "f" },
        { id: 7, value: "g" }
      ],
      loading: false,
      conditionForm: {
        type: []
      }
    };
  },
  components: {
    ConditionSelect,
    ConditionOption
  },
  methods: {
    selectSure() {}
  }
};

API

Props

参数说明类型默认值
max可被勾选的 checkbox 的最大数量number-1
disabled是否禁用booleanfalse

Events

事件说明
selectSure点击确定按钮后触发的事件

组件完整代码展示

该组件需要全局注入 element-ui 中的 Form，FormItem 组件

1
2
3
4
// main.js
import { Form, FormItem } from "element-ui";

Vue.use(Form).use(FormItem);
  1. ConditionSelect
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class="select-checkbox">
  <el-select
    v-model="selectValue"
    @visible-change="visibleChange"
    v-bind="$attrs"
    popper-class="option-container"
  >
    <div
      slot="empty"
      v-if="$slots.default && $slots.default.length"
      style="max-width: 400px;"
    >
      <el-form-item>
        <el-checkbox-group
          v-model="checkList"
          :max="max >= 0 ? max : $slots.default.length"
        >
          <slot />
        </el-checkbox-group>
      </el-form-item>
      <div class="select-btn">
        <span>
          已选{{ checkList.length }}/{{ max >= 0 ? max : $slots.default.length
          }}
        </span>
        <el-button type="primary" size="mini" @click="selectTag">
          确定
        </el-button>
      </div>
    </div>
    <div slot="empty" class="nodata" v-else>无数据</div>
  </el-select>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import { Select, CheckboxGroup } from "element-ui";
export default {
  inheritAttrs: false,
  data() {
    return {
      checkList: [],
      valueList: [],
      selectValue: ""
    };
  },
  props: {
    max: {
      type: Number,
      default: -1
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  model: {
    prop: "value",
    event: "change"
  },
  components: {
    ElSelect: Select,
    ElCheckboxGroup: CheckboxGroup
  },
  methods: {
    selectTag() {
      const valueList = [];
      const selectValue = [];
      this.checkList.forEach(item => {
        valueList.push(JSON.parse(item).value);
        selectValue.push(JSON.parse(item).label);
      });
      this.valueList = valueList.sort();
      this.selectValue = selectValue.join("，");
      this.$emit("change", this.valueList);
      this.$children[0].blur();
      this.$emit("selectSure");
    },
    visibleChange() {
      if (this.valueList.length) {
        const checkList = [];
        if (this.$slots.default) {
          this.valueList.forEach(element => {
            this.$slots.default.forEach(slot => {
              if (slot.componentOptions.propsData.value == element) {
                checkList.push(JSON.stringify(slot.componentOptions.propsData));
              }
            });
          });
        }
        this.checkList = checkList;
      }
    }
  },
  watch: {
    value() {
      this.valueList = this.value;
      this.visibleChange();
      const selectValue = [];
      this.checkList.forEach(item => {
        selectValue.push(JSON.parse(item).label);
      });
      this.selectValue = selectValue.join("，");
    }
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.select-checkbox {
  display: inline-block;
  width: 100%;
  .el-select {
    width: 100%;
  }
}
/deep/ .option-container {
  background: #fff;
  padding: 30px 25px;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.07) !important;
  .select-btn {
    margin-top: 10px;
    text-align: right;
  }
  span {
    color: #4f5e70;
    font-size: 16px;
  }
  .el-button--mini {
    margin-left: 25px;
    width: 90px;
    height: 32px;
    span {
      color: #fff;
    }
  }
  .nodata {
    text-align: center;
    color: #999;
    font-size: 16px;
  }
}
/deep/ .el-form-item {
  padding: 10px;
  margin-bottom: 0;
  .el-form-item__content {
    margin-left: 0 !important;
  }
}
.select-btn {
  padding: 10px;
  text-align: right;
}
  1. ConditionOption
1
<el-checkbox :label="JSON.stringify({ label, value })">{{ label }}</el-checkbox>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { Checkbox } from "element-ui";
export default {
  inheritAttrs: false,
  props: {
    label: {
      type: String,
      default: ""
    },
    value: {
      type: [String, Number],
      default: ""
    }
  },
  components: {
    ElCheckbox: Checkbox
  }
};