design-vue-ui

# d-multiple-select 多个选择框级联

# 何时使用


扩展 d-select 组件，多个选择框级联功能。

# 代码演示

基本

支持大多数 d-select 的 API 属性

详细看下面 API
显示代码 
<template>
  <div class="demo-main">
    <label for="">基本使用-value: {{ form.basicValue }}</label>
    <d-multiple-select
      v-model="form.basicValue"
      :options="options"
      placeholder="请选择"
    />
    <label for="">只显示前面两节</label>
    <d-multiple-select
      v-model="form.basicValue3"
      :options="options"
      :maxLevel="2"
      :defaultLevel="2"
      placeholder="请选择"
    />

    <label for="">labelInValue: {{ form.basicValue2 }}</label>
    <d-multiple-select
      v-model="form.basicValue2"
      :options="options"
      labelInValue
      placeholder="请选择"
    />
  </div>
</template>
<script>
import baseMixin from "./baseMixin";
export default {
  mixins: [baseMixin],
  data() {
    return {
      form: {
        basicValue: [],
        basicValue2: [],
      },
    };
  },
  methods: {},
};
</script>
<style scoped>
.demo-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
</style>
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
显示代码
change focus all
动态加载

loadMode 分为 change 和 focus 的时候动态加载

也支持传 all 的时候 change 加载失败或数据为 [] 后，focus 会重新加载数据

loadData 为一个函数，返回一个 Promise，resolve 后会渲染数据（无 loadData，loadMode 设置无效）

同时必须设置 maxLevel 属性，用来设置级联的层级
显示代码 
<template>
  <div class="demo-main">
    <a-button-group>
      <a-button
        v-for="item in btnArr"
        :key="item"
        :type="item === currentLoadMode ? 'primary' : 'default'"
        @click="btnClick(item)"
      >
        {{ item }}
      </a-button>
    </a-button-group>
    <d-multiple-select
      v-model="form.basicValue"
      :options="options"
      placeholder="请选择"
      :load-mode="currentLoadMode"
      :loadData="loadData"
      :maxLevel="3"
    />
    <d-multiple-select
      v-model="form.basicValue1"
      :options="options"
      placeholder="请选择"
      :load-mode="currentLoadMode"
      :loadData="loadData"
      :maxLevel="3"
      :defaultLevel="3"
    />
  </div>
</template>
<script>
import baseMixin from "./baseMixin";
export default {
  mixins: [baseMixin],
  data() {
    return {
      form: {
        basicValue: [],
        basicValue1: []
      },
      currentLoadMode: "change",
      btnArr: ["change", "focus", "all"],
    };
  },
  methods: {
    async loadData({ val, index, option, loadMode }) {
      console.log('=========')
      await this.delay(1000);
      // 下面是模拟接口数据-------忽略
      if (loadMode !== "focus") return option.children;
      let _options = this.options;
      for (let i = 0; i < index; i++) {
        const _val = val[i];
        const _option = _options.find((v) => v.value === _val);
        if (!_option) return [];
        _options = _option.children;
      }
      console.log(_options)
      return _options;
    },
    btnClick(item) {
      this.currentLoadMode = item;
      // 初始化，，还原
      this.form.basicValue = [];
      this.form.basicValue1 = [];
    },
  },
};
</script>
<style scoped>
.demo-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
</style>
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
71
72
73
74
75
76
77
显示代码
pagination scroll
分页

分页通过 pageType 来 控制 分页类型 ("pagination", "scroll")

pag 模式下，默认每页 10 条数据

暂时不支持 单 select 列表 动态加载数据。
显示代码 
<template>
  <div class="demo-main">
    <a-button-group>
      <a-button
        v-for="item in btnArr"
        :key="item"
        :type="item === pageType ? 'primary' : 'default'"
        @click="btnClick(item)"
      >
        {{ item }}
      </a-button>
    </a-button-group>
    <d-multiple-select
      v-model="form.basicValue"
      :options="options"
      placeholder="请选择"
      :pageType="pageType"
      :maxLevel="3"
      :pag="{
        current: 1,
        pageSize: 10,
        showTotal: (total) => `共 ${total} 条`,
      }"
    />
  </div>
</template>
<script>
import baseMixin from "./baseMixin";
export default {
  mixins: [baseMixin],
  data() {
    return {
      form: {
        basicValue: [],
      },
      pageType: "pagination",
      btnArr: ["pagination", "scroll"],
    };
  },
  methods: {
    btnClick(item) {
      this.pageType = item;
      // 初始化，，还原
      this.form.basicValue = [];
    },
  },
};
</script>
<style scoped>
.demo-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
</style>
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
显示代码
确定 重置
校验

只需选择一个选项或必须选择最后一个选项才能进行校验

endValid 属性控制是否为最后一个选项 校验（这种场景会使开始的一系列选项结果都是 [] 直到全部选择完毕才会得到 value 值）

renderValue 与 endValid 属性是一样的作用，更具有灵活性，两者二选一使用
显示代码 
<template>
  <div class="xm-main">
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
    >
      <a-form-model-item label="只需选择一个" prop="basicValue">
        <d-multiple-select
          v-model="form.basicValue"
          :options="options"
          placeholder="请选择"
        />
      </a-form-model-item>
      <a-form-model-item label="endValid（末位选择）" prop="basicValue2">
        <d-multiple-select
          v-model="form.basicValue2"
          :options="options"
          placeholder="请选择"
          endValid
        />
      </a-form-model-item>
      <a-form-model-item label="endValid 和 maxLevel = 2" prop="basicValue3">
        <d-multiple-select
          v-model="form.basicValue3"
          :options="options"
          placeholder="请选择"
          :maxLevel="2"
          endValid
        />
      </a-form-model-item>
      <a-form-model-item label="endValid 和 basicValue4 拥有默认值" prop="basicValue4">
        <d-multiple-select
          v-model="form.basicValue4"
          :options="options"
          placeholder="请选择"
          endValid
        />
      </a-form-model-item>
      <a-alert message="basicValue5 初始化有值的情况下，renderValue 也需要保持一致" banner style="margin: 10px;"/>
      <a-form-model-item label="renderValue方式-- basicValue5 默认值" prop="basicValue5">
        <d-multiple-select
          v-model="form.basicValue5"
          :options="options"
          placeholder="请选择"
          :renderValue.sync="form.renderValue"
        />
        
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="onSubmit"> 确定 </a-button>
        <a-button style="margin-left: 10px" @click="resetForm"> 重置 </a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import baseMixin from "./baseMixin";
export default {
  mixins: [baseMixin],
  data() {
    return {
      form: {
        basicValue: [],
        basicValue1: [],
        basicValue2: [],
        basicValue3: [],
        basicValue4: ["320000", "320200", "320205"],
        basicValue5: ["320000", "320200", "320205"],
        renderValue: ["320000", "320200", "320205"],
      },
      rules: {
        basicValue: { required: true, message: "请选择", trigger: "change" },
        basicValue1: { required: true, message: "请选择", trigger: "change" },
        basicValue2: { required: true, message: "请选择", trigger: "change" },
        basicValue3: { required: true, message: "请选择", trigger: "change" },
        basicValue4: { required: true, message: "请选择", trigger: "change" },
        basicValue5: { required: true, message: "请选择", trigger: "change" },
      }
    };
  },
  methods: {
    delay(ms) {
      return new Promise((resolve) => setTimeout(resolve, ms));
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
      // renderValue 需要手动重置 （或者使用 建一个隐藏的prop 是 renderValue ）
      this.form.renderValue = this.form.basicValue5
    },
    onChange() {
      console.log("sdhjfudish");
    },
  },
};
</script>
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
显示代码

# API

# Select props

继承 d-select 大多数的属性,(目前不支持 d-select 的 slot 系列)

# Select events

与 d-select 有细微差别, 其他事件皆继承了！详情请查看 d-select 文档

← 更新日志 →