在做项目的时候可能存在不一定按照Element-plus的键名:value、label、children等等设置;所以方法如下~

1、在el-cascader中设置props;如下代码

	<el-cascader
	  class="m-r-15"
	  v-model="type"
	  :props="customProps"
	  :options="options"
	  @change="handleChange"
	/>

2、设置customProps值; 如下代码

    customProps: {
       multiple: false, // 启用多选
       emitPath: false, // 只返回该节点的值
       value: "id", // 自定义当前数组的键名 - value
       label: "name", // 自定义当前数组的键名 - label
       children: "children", // 自定义当前数组的键名 - children
       expandTrigger: "click", // 次级菜单的展开方式 - click/hover
       lazy: "true", // 是否动态加载子节点,需与 lazyLoad 方法结合使用
       lazyLoad: "true", // 加载动态数据的方法,仅在 lazy 为 true 时有效
     },

3、数据结构;如下代码

	options: [
       {
         id: "高考模拟",
         name: "高考模拟",
         children: [
           {
             id: "word test",
             name: "word test",
           },
           {
             id: "file test",
             name: "file test",
           },
         ],
       },
     ],

4、最后实现效果可使用。

旨在分享~~~~~~~~~~

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐