el-cascader支持远程搜索功能实现

el-cascader默认是不支持远程搜索的,但是需要实现这个功能,记录实现的方法:

    <el-cascader
      v-model="data"
      :options="mafOptions"
      style="width: 100%"
      filterable
      clearable
      lazy
      placeholder="输入名称进行查找"
      :before-filter="get_tree"	**关键地方**
      @change="handleChange"
    />

主要是在before-filter这里实现远程搜索功能

    get_tree(value) {	// 在此处请求远程接口,并进行数据处理
      get_list_type({
        struct_name: value,
        page_size: 10,
        page_index: 1
      })
        .then((res) => {
          const { data } = res

          if (data.code === 0) {
            return data.data
          }
        })
        .then((mafList) => {
          const promiseList = mafList.map((maf) => {
            return get_list_version({ maf_interface_id: maf.id }).then(
              (res) => {
                const { data } = res
                if (data.code === 0) {
                  maf.version_list = data.data
                }
                return maf
              }
            )
          })

          return Promise.all(promiseList)
        })
        .then((resList) => {
          // 把数据处理成 组件需要的格式
          const result = resList.map((maf) => {
            const item = {
              value: maf.id,
              label: maf.struct_name,
              children: []
            }
            maf.version_list.forEach((version) => {
              item.children.push({
                value: version.id,
                label: version.version
              })
            })
            return item
          })
          this.mafOptions = result // this.mafOptions就是来展示的数据,实现远程搜索
        })

      return false
    },

你可能感兴趣的:(前端,vue.js,elementui,前端)