如何以elementui的级联选择器展示后台数据

Question

获取到的后台数据


已有使用elementui的select选择器的实现代码
.vue文件
html部分代码

<el-select v-model="category" placeholder="请选择" size="mini" @change="handleCategory" :clearable="true">
            <el-option v-for="(item,index) in categoryList" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-select v-model="assistantCategory" placeholder="请选择" size="mini">
            <el-option v-for="(item,index) in assistantList" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>

js部分代码

// 数据获取
getCategory(data).then(res => {
        const result = res.data.filter(e => {
          if (this.language === 'zh') {
            return e.name === '帮助中心'
          } else {
            return e.name === 'Help'
          }
        })
        this.categoryList = result[0].child
      })
    },

    handleCategory(value) {
      this.assistantCategory = null
      this.assistantList = []
      if (value) {
        this.assistantList = this.categoryList.filter((e, i) => {
          return e.id === value
        })
        this.assistantList = this.assistantList[0].child
      }
    }
}

已有显示效果


需要换成使用级联选择器

Answer 1

<el-cascader v-model="selectedOptions" :options="options" :key="isResourceShow" size="mini" clearable placeholder="请选择" @change="handleChange"></el-cascader>

let pList = []
        for (var i = 0; i < this.categoryList.length; i++) {
          let List = []
          pList.push({ value: this.categoryList[i].id, label: this.categoryList[i].name, children: List })
          for (var n = 0; n < this.categoryList[i].child.length; n++) {
            List.push({ value: this.categoryList[i].child[n].id, label: this.categoryList[i].child[n].name })
          }
        }
        this.disable = true
        ++this.isResourceShow // key用于解决elementui的报错
        this.options = pList

利用字符串拼接，返回后台所需的数据格式