Element-UI 级联选择框回显问题

# 前言

在ElementUI中，级联选择框的v-model是一个数组，存的是id数组

但是我服务器存的是数组的最后一个id，那么如何才能回显？

data() {
    return {
      // 分类的树结构数据列表
      cateList: [],
      // 已选择分类ID数组
      selectCateKeys: []
    }
  }

1
2
3
4
5
6
7
8

如下代码

<el-cascader
    v-model="selectCateKeys"
    :options="cateList"
    ref="cateListRef"
    width="auto"
    :show-all-levels="showAllLevels"
    filterable
    :props="{
      expandTrigger: 'hover',
      value: 'id',
      label: 'name',
      children: 'children'
    }"
    clearable
    @change="selectCateChange"
  >
  </el-cascader>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 思路

服务器返回一个id，我从树结构数据中，把他的父级id都查出来

/**
     * 设置选定值
     */
    setSelectCateKeys(id) {
      this.selectCateKeys.splice(0)
      let keys = this.find(this.cateList, id)
      this.selectCateKeys = keys
    },
    /**
     * 递归，通过子级Id向上找到所有的父级id
     */
    find(array, id) {
      let stack = []
      let going = true
      let walker = (array, id) => {
        array.forEach(item => {
          if (!going) return
          stack.push(item['id'])
          if (item['id'] === id) {
            going = false
          } else if (item['children']) {
            walker(item['children'], id)
          } else {
            stack.pop()
          }
        })
        if (going) stack.pop()
      }
      walker(array, id)
      return stack
    },

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

很明显，我现在找到了id数组，数据已经是正确了，但是问题又来了，Element-UI中，根本不会回显文本name，我点击己联选择框进去，发现已经选择了，就是文本没有回显，所以我再定义多一个方法

/**
     * 设置选定值
     */
    setSelectCateKeys(id) {
      this.selectCateKeys.splice(0)
      let keys = this.find(this.cateList, id)
      this.selectCateKeys = keys
      let name = this.findName(this.cateList, id).join(' / ')
      this.$refs.cateListRef.inputValue = name
    },
    /**
     * 递归，通过id查找名字
     */
    findName(array, id) {
      let name = []
      let going = true
      let walker = (array, id) => {
        array.forEach(item => {
          if (!going) return
          name.push(item['name'])
          if (item['id'] === id) {
            going = false
          } else if (item['children']) {
            walker(item['children'], id)
          } else {
            name.pop()
          }
        })
        if (going) name.pop()
      }
      walker(array, id)
      return name
    },
    /**
     * 递归，通过子级Id向上找到所有的父级id
     */
    find(array, id) {
      let stack = []
      let going = true
      let walker = (array, id) => {
        array.forEach(item => {
          if (!going) return
          stack.push(item['id'])
          if (item['id'] === id) {
            going = false
          } else if (item['children']) {
            walker(item['children'], id)
          } else {
            stack.pop()
          }
        })
        if (going) stack.pop()
      }
      walker(array, id)
      return stack.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
47
48
49
50
51
52
53
54
55
56