elementui tree获取父节点_elementui的级联选择组件的使用

1. 查看elementui的官网，查看级联选择器：

 <el-cascader    v-model="value"    :options="options"    @change="handleChange">   el-cascader>

在添加窗口上写

 <el-form-item label="所属分类id" prop="catelogId">      <el-cascader        v-model="dataForm.catelogId"        :options="categorys">      el-cascader>

categorys定义好这个，需要在return中表明一下[]

export default {    data () {      return {        categorys:[],      }    },

然而这个数组是需要从服务端查询出来的，在这里可以参照前几天写过的查询树节点的方法，在方法合集中：

getCategorys(){        this.$http({          url: this.$http.adornUrl('/product/category/list/tree'),//请求路径          method: 'get',//请求方式          /* params: this.$http.adornParams({//带参数的用这个方法以key:value的方式传递             'page': this.pageIndex,             'limit': this.pageSize,             'roleName': this.dataForm.roleName           })*/        }).then(({data}) => {//请求成功之后就是then了          console.log("成功获取数据",data.data)          this.categorys=data.data;        })      },

而这个组件是想在刚创建的时候就去调用这个方法，写到生命周期的方法中~

//页面加载的时候就调用created() {  this.getCategories();}

到此测试一下发现格式是已经出来了，但是没有相应的数据，那是因为组件定义了值没有和我们定义的对应上

参考文档的属性值，对应上咱们规定的字段值

data () {      return {        props:{          value:"catId",          label:"name",          children:"children",        },        categorys:[],      }    },

再次测试发现

检查这个接口也有返回一个空的数组

这时候就可以在后台稍做处理一下了~

2.找到实体类，标注一个注解

/** 保存子分类用的* */@JsonInclude(JsonInclude.Include.NON_EMPTY)//返回的list不为空的时候才会带上这个一起返回@TableField(exist=false)//声明不是数据库里面的，用来存父级数据的子数据private List children;

再次测试，发现大功告成~

保存到数据库中是需要一个数组，需要改一下声明的分类id

catelogIds: [],//组件的返回值是一个数组catelogId: 0,//最终提交的是最后一个

<el-cascader        v-model="dataForm.catelogIds"        :options="categorys"        :props="props"      >      el-cascader>

3.最后提交的数据

'catelogId': this.dataForm.catelogIds[this.dataForm.catelogIds.length-1]

在保存成功之后。页面刷新说明成功：在这里有一个子组件传递父组件的一个方法：

if (data && data.code === 0) {                this.$message({                  message: '操作成功',                  type: 'success',                  duration: 1500,                  onClose: () => {                    this.visible = false                    this.$emit('refreshDataList')                  }                })              }

this.$emit('refreshDataList')在子组件中写了，去父组件查找一下这个所监听的

        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList">add-or-update>

以上是我的个人笔记，探索未知密宝，记录学习笔记，分享有趣的故事，欢迎大家来访！