design-vue-ui

# d-cascader 多选级联

# 何时使用


常规的 使用`a-cascader`

a-cascader (opens new window)

d-cascader 是一个基于 ant-design-vue 中的 a-cascader 组件扩展的多功能级联选择组件(但未使用 a-cascader 组件，故不能全使用里面的属性等，以文中属性为主)，提供以下增强功能：

# 代码演示

基本使用 - 多选级联

支持多选模式的级联选择，允许用户在多个级别中进行选择
显示代码 
<template>
  <div>
    <d-cascader
      :options="options"
      placeholder="请选择"
      v-model="form.selectValue"
    ></d-cascader>
  </div>
</template>
<script>
import baseMixin from "./baseMixin";
export default {
  mixins: [baseMixin],
  data() {
    return {
      form: {
        selectValue: ["320000"],
      },
    };
  },
  created() {},
  methods: {},
};
</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
显示代码
只显示选中的子节点

组件会自动筛选并仅显示当前已选中子节点的选项。
显示代码 
<template>
  <div>
    <d-cascader
      :options="options"
      placeholder="请选择"
      v-model="form.selectValue"
      showCheckedChild
    ></d-cascader>
  </div>
</template>
<script>
import baseMixin from "./baseMixin";
export default {
  mixins: [baseMixin],
  data() {
    return {
      form: {
        selectValue: [],
      },
    };
  },
  created() {},
  methods: {},
};
</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
显示代码
显示全选按钮进行全选处理

提供全选按钮，允许用户在当前级别上快速选择所有选项。
显示代码 
<template>
  <div>
    <d-cascader
      :options="options"
      v-model="form.selectValue"
      showSelectAll
    ></d-cascader>
  </div>
</template>
<script>
import baseMixin from "./baseMixin";
export default {
  mixins: [baseMixin],
  data() {
    return {
      form: {
        selectValue: ["320000"],
      },
    };
  },
  created() {},
  methods: {},
};
</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
显示代码
label 包装到 value 中 {key: string, label: string}

label 和 key 被包装到 value 中，便于处理和显示自定义数据。
显示代码 
<template>
  <div>
    <d-cascader
      :options="options"
      placeholder="Please select"
      labelInValue
      v-model="form.selectValue"
    >
    </d-cascader>
  </div>
</template>
<script>
import baseMixin from "./baseMixin";
export default {
  mixins: [baseMixin],
  data() {
    return {
      form: {
        selectValue: [],
      },
    };
  },
  created() {},
  methods: {},
};
</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
显示代码
自定义 option 显示数据

允许用户自定义下拉选项的显示数据和格式。
显示代码 
<template>
  <div>
    <d-cascader
      :options="options"
      placeholder="Please select"
      showSelectAll
      v-model="form.selectValue"
    >
      <template #optionRender="{ option }">
        {{ option.label }} （{{ option.value }}）
      </template>
    </d-cascader>
  </div>
</template>
<script>
import baseMixin from "./baseMixin";
export default {
  mixins: [baseMixin],
  data() {
    return {
      form: {
        selectValue: [],
      },
    };
  },
  created() {},
  methods: {},
};
</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
显示代码
自定义已选项

返回值格式为 [{ label: **,key: ** }] ， 因为处理后的数据逻辑 key 值 会变化，

采用这种方式，要么 key 使用 fieldNames 中的 value 值， 要么通过 deselect 自己进行删除处理逻辑
显示代码 
<template>
  <div>
    <d-cascader
      :options="options"
      v-model="form.selectValue"
      :displayRender="displayRender1"
    >
    </d-cascader>
    <d-cascader
      :options="options"
      v-model="form.selectValue"
      :displayRender="displayRender"
      @deselect="deselect"
      style="margin-top: 24px"
    >
      <template #optionRender="{ option }">
        {{ option.label }} （{{ option.value }}）
      </template>
    </d-cascader>
  </div>
</template>
<script>
import baseMixin from "./baseMixin";
export default {
  mixins: [baseMixin],
  data() {
    return {
      form: {
        selectValue: [],
      },
    };
  },
  created() {},
  methods: {
    displayRender1(itemArr, pItem) {
      return pItem.map((v) => {
        console.log(v);
        return {
          key: v.value,
          label: `${v.label}（${v.id}）`,
        };
      });
    },
    displayRender(itemArr, pItem) {
      const _levObj = {
        1: {
          num: 0,
          prev: "省",
          next: "个",
        },
        2: {
          num: 0,
          prev: "市",
          next: "个",
        },
        3: {
          num: 0,
          prev: "区",
          next: "个",
        },
      };
      if (!pItem.length) return [];
      const arr = [];
      pItem.forEach((v) => {
        _levObj[v.level].num++;
      });
      for (const key in _levObj) {
        if (Object.prototype.hasOwnProperty.call(_levObj, key)) {
          arr.push(
            `${_levObj[key].prev}${_levObj[key].num}${_levObj[key].next}`
          );
        }
      }
      return arr;
    },
    deselect(val) {
      // 自己删除的处理逻辑
      // console.log(val)
    },
  },
};
</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
显示代码
自定义字段名

支持自定义字段名称，以适应不同的数据结构需求。
显示代码 
<template>
  <d-cascader
    :options="options"
    :fieldNames="{ label: 'label', value: 'id', children: 'children' }"
    v-model="form.selectValue"
  ></d-cascader>
</template>
<script>
import baseMixin from './baseMixin'
export default {
mixins: [baseMixin],
  data() {
    return {
      form: {
        selectValue: [],
      },
    };
  },
  created() {},
  methods: {},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
显示代码
自定义没有数据的 option 面板显示效果

提供自定义配置，用于定制当没有数据时 option 面板的显示效果，提升用户体验。
显示代码 
<template>
  <div>
    <d-cascader
      :options="[]"
      placeholder="Please select"
      showSelectAll
      v-model="form.selectValue"
    >
    </d-cascader>
    <d-cascader
      :options="[]"
      placeholder="Please select"
      style="margin-top: 24px"
      showSelectAll
      v-model="form.selectValue"
      no-data-text="没得数据"
    >
    </d-cascader>
    <d-cascader
      :options="[]"
      placeholder="Please select"
      showSelectAll
      v-model="form.selectValue"
      style="margin-top: 24px"
    >
      <template #noDataContent>
        <a-empty />
      </template>
    </d-cascader>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        selectValue: [],
      },
    };
  },
  created() {},
  methods: {},
};
</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
显示代码
遇到面板超过边界动态左移显示出完整面板

遇到超出边界，为了显示 options 数据，而又不愿意移位置到其他地方化的，可以试试这个属性。
显示代码 
<template>
  <div>
    <d-cascader
      :options="options"
      placeholder="请选择"
      v-model="form.selectValue"
      allow-resize
    ></d-cascader>
  </div>
</template>
<script>
import baseMixin from "./baseMixin";
export default {
  mixins: [baseMixin],
  data() {
    return {
      form: {
        selectValue: ["320000"],
      },
    };
  },
  created() {},
  methods: {},
};
</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
显示代码
点击options item 动态加载下一级

loadData 函数：加载数据并根据 isLeaf 确定是否需要加载下一级。
处理异步操作：确保异步操作完成后再处理后续逻辑。
loadData 必须处理完异步操作，组件还需要处理后面的逻辑，所以需要使用到 promise 或 async
显示代码 
<template>
  <div>
    <d-cascader
      :options="options"
      v-model="form.selectValue"
      :load-data="loadData"
      :fieldNames="{ children: 'child' }"
    ></d-cascader>
  </div>
</template>
<script>
import baseMixin from "./baseMixin";
export default {
  mixins: [baseMixin],
  data() {
    return {
      form: {
        selectValue: [],
      },
    };
  },
  created() {},
  methods: {
    async loadData(item) {
      // 模拟数据
      if (item.child) return;
      item.$loading = true;
      await this.delay(1000)
      item.child = item.children.map((v) => {
        v.disabled = Number(v.id) % 6 === 1;
        v.isLeaf = v.level === 3;
        return v;
      });
      item.$loading = false;
    },
  },
};
</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
显示代码

# API

# cascader props

# 事件

← 更新日志 →