Element Plus Cascader 级联选择器简单使用及回显设置

如何简单使用Cascader 级联选择器

  <el-cascader placeholder="商品信息"
    :options="dataSource.goodIds" 
    filterable 
    v-model="goodsIdAndShopId"
    @change="syncChangeGoodsIdAndShopId"
    :props="props"
  />

设置下拉选项值

:options: 用于设置下拉菜单中的可选项, 数据格式必须严格遵守格式要求

格式要求:
value: 提交时提交的值
label: 展示在下拉框中的文字
children: 子选项(如果没有子选项可不写, 如果为空,则会展示一个空的选择框)

官方文档示例(简写):

const options = [
  {
    value: 'guide',
    label: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          {
            value: 'consistency',
            label: 'Consistency',
          },
          {
            value: 'feedback',
            label: 'Feedback',
            children: [
              {
                value: 'consistency',
                label: 'Consistency',
              },
              {
                value: 'feedback',
                label: 'Feedback',
              },
            ],
          },
        ],
      },
    ],
  },
  {
    value: 'resource',
    label: 'Resource',
    children: [
      {
        value: 'axure',
        label: 'Axure Components',
      },
    ],
  },
]

可搜索

添加filterable选项

<el-cascader placeholder="商品信息"
    filterable 
  />

返回值

首先根据需求确定是需要每一层级选中项的值还是只需要最后一个层级选中项的值, 如果只需要最后一层的值, 则需要添加配置信息

每层都要

返回值为数组,[0:"我是第一层的value",1:"我是第二层的value"]

只要最后一层

  <el-cascader
    :props="props"
  />
  
  // js部分
const props = {
  emitPath: false // 只返回最后一级的选中项目
}

返回值为最后一层的value

回显

设置v-model="goodsIdAndShopId"中绑定的变量值即可。

但是要注意的是，设置时的数据格式要与上面提到的返回值格式要统一，如果每层都要，则需要数据格式为数组，且顺序要与层级顺序对应。否则无法正确回显。

注意：在设置回显的value时需要保证值的类型是string类型，否则可能导致回显失败

goodId.value.toString() // 转为string

每层都要
例如：

goodsIdAndShopId.value = [0:"我是第一层的value",1:"我是第二层的value"];
或者
goodsIdAndShopId.value = "我是第二层的value";

如果设置是只要最后层选择的数据，则设置值为例如

goodsIdAndShopId.value = "我是第一层的value";