如何对级联选择器进行数据渲染

水深无声 2022-11-07 14:43 17阅读 0赞

##  ##

级联选择器是真的难倒我了，弄了很久要么就是没有数据要么就是子数据出不来，后来请教了一下师兄，也看了很多博文，勉强把显示做了出来

组件部分：

<el-cascader placeholder="请选择分类" v-model="tableQuery.id" @keyup.enter.native="search" :options="options"
              :props="optionProps" clearable ref="cascaderAddr" @change="handleChange">
            </el-cascader>

js部分：

export default {
    data() {
    return {
     optionProps: {
            value: "id",
            label: "typeName",
            children: "children",//这里最好要后台返回树形数据
            checkStrictly: true,
          },
          options: []，
    }
    }
    },
    mounted() {
        this.handleChange();
      },
    method:{
      handleChange() {
          getType(this.tableQuery2)//这里是我自己要用到接口和请求数据
            .then((res) => {
              res.obj.forEach((item, index) => {
                item.removeLoading = false;
              });
              this.options = translateDataToTree(res.obj);
              //我的后台没有按照树形数据返回，所以这里用了转换方法进行处理，有点点麻烦。如果后台是树形数据，就是 this.options = res.obj；
            })
            .finally(() => {
              this.tableLoading = false;
            });
        },
      }

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关前端级联选择器的实现

使用场景下拉选择器存在多级的场合，并且一级下面必须有二级。前端代码 <el-form-item label="费目名称" prop="expenseI

青旅半醒/ 2024年04月01日 15:24/ 0 赞/ 102 阅读

相关 Vue中如何进行表单地区选择与级联联动

Vue中如何进行表单地区选择与级联联动在Vue中实现表单地区选择和级联联动是一个常见的需求。用户经常需要填写地区信息，而一个简单的选择框往往无法满足复杂的地区数据结构。

水深无声/ 2023年10月14日 04:27/ 0 赞/ 19 阅读

相关设置Cascader级联选择器默认值

// this.$set(this.teamArea,0,this.team.province) // this.$set(this.teamArea,1,th

谁借莪１个温暖的怀抱￠/ 2023年03月06日 03:51/ 0 赞/ 27 阅读

相关 element UI Cascader 级联选择器

<el-form-item label="跳转分类"> <el-cascader style="width: 300px;"

我就是我/ 2023年02月17日 02:57/ 0 赞/ 19 阅读

相关 Element UI学习3--Cascader 级联选择器

1、基础用法 1、默认 click 触发子菜单 <div class="block"> <span class="demonstration"

约定不等于承诺〃/ 2023年01月03日 04:16/ 0 赞/ 527 阅读

相关如何对级联选择器进行数据渲染

级联选择器是真的难倒我了，弄了很久要么就是没有数据要么就是子数据出不来，后来请教了一下师兄，也看了很多博文，勉强把显示做了出来组件部分： <el-casc

水深无声/ 2022年11月07日 14:43/ 0 赞/ 18 阅读

相关 Element-ui Cascader 级联选择器回显数据

回显的方式 > 两种情况： > 1.直接使用JSON回显（针对于每个人看到的菜单一致，数据库直接保存数据JSON串，直接回显） > 2.保存最后一位，递归回显（

快来打我*/ 2022年10月27日 13:42/ 0 赞/ 46 阅读

相关 elementUi——Cascader 级联选择器渲染数据很多时卡顿问题解决

上周在做后台管理系统时，有用到了级联选择器，这个级联选择器主要用于分组展示的数据，比如省市区三级两级联动等。 [elementUi中的cascader级联选择器官网链接：h

待我称王封你为后i/ 2022年10月06日 05:47/ 0 赞/ 2774 阅读

相关 Element el-cascader 级联选择器详解

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 概述 2. 数据绑定 2.1 默认数据绑定 2.2 指

女爷i/ 2022年09月09日 12:51/ 0 赞/ 816 阅读

相关 WebGIS:CSS级联样表—选择器

1、标签选择器（TYPE Selectors）对象\{属性名：属性值；\}（p\{color:type;\}） <html> <style type="t

柔光的暖阳◎/ 2022年05月22日 06:12/ 0 赞/ 283 阅读