vue+elementui 多级多选穿梭框（常用于省市区三级联动）

提示：多级多选穿梭框（常用于省市区三级联动）

使用步骤如下

1.安装（使用 Element UI 的升级版穿梭框组件krry-transfer）

npm install krry-transfer --save
1

2.读入数据

代码如下（示例）：main.js中引入

import Vue from 'vue'
import krryTransfer from 'krry-transfer'

Vue.use(krryTransfer)

/* 
 * or 按需引入
 * import { krryCascader, krryPaging } from 'krry-transfer'
 *
 * Vue.use(krryCascader)
 * Vue.use(krryPaging)
 */

1
2
3
4
5
6
7
8
9
10
11
12
13

3.使用kr-cascader,代码以及效果图如下：

<template>
  <div>
    <kr-cascader
      :dataObj="dataObj"
      :selectedData="selectedData"
    ></kr-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataObj: {
        province: {
          '101103': '广东省',
        },
        city: {
          '101103': [
            {
              id: 101164181112,
              label: '深圳市'
            }
          ]
        },
        county: {
          '101164181112': [
            {
              id: 106105142126,
              label: '宝安区'
            }
          ]
        }
      },
      selectedData: [
        {
          id: '101101-101101101112',
          label: '北京市-通州区'
        }
      ]
    }
  }
}
</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

4.使用kr-paging，代码和效果图如下：

<template>
  <div>
    <kr-paging
      :dataList="dataList"
      :selectedData="selectedData"
      :pageSize="100"
    ></kr-paging>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        {
          id: 0,
          label: '这是第0条数据'
        },
        {
          id: 1,
          label: '这是第1条数据'
        }
      ],
      selectedData: [
        {
          id: 0,
          label: '这是第0条数据'
        }
      ]
    }
  }
}
</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

---

总结:亲测有效，本文借鉴于https://www.cnblogs.com/ainyi/p/11787394.html，详细api请点击此链接查看