级联选择器的使用

element-ui 中级联选择器的使用，级联选择器主要适用于下拉框的选择使用，使用频率还是比较高的。

首先在element-ui中找到级联选择器这部分内容

这里的话，希望能够将每一项都能够进行选中，而不是只有最底下一层才能够选中，因此选择任意一级选项。

展开就是这样

我们来看一下官网给的demo是什么样的

html:

<template>
  <div class="example-block">
    <span class="example-demonstration"
      >Select any level of options (Single selection)</span
    >
    <el-cascader :options="options" :props="props1" clearable />
  </div>
</template>

script:

const props1 = {
  checkStrictly: true,
}

const options = [
  {
    value: 'guide',
    label: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          {
            value: 'consistency',
            label: 'Consistency',
          },
          {
            value: 'feedback',
            label: 'Feedback',
          },
          {
            value: 'efficiency',
            label: 'Efficiency',
          },
          {
            value: 'controllability',
            label: 'Controllability',
          },
        ],
      },
]

我们能够看到script中他的数据要求是：层级关系，父级与子级的关系是children进行关联的，这就要求，后端传递给前端的代码格式必须也是这种具有children格式的。

options是对应的他的数据项，props1则是他的配置选项

扫描二维码关注公众号，回复： 15464259 查看本文章

根据props里面的内容主要来说一下这两个属性

label就是对应的在级联选择器中展示出来的每一个选择的名字，而value 则可以理解为名字背后所对应的值。

案例：

需要添加一个部门的信息，要求展示的是所有部门alldept，但是添加的是上级部门parentId，也就是绑定的字段是上级部门字段,而每个部门的名字为name,每个部门的值是id。

那么级联选择器就应该这样写

 <el-form-item label="上级部门" prop='id'>
             <div class="example-block">
               <el-cascader
                 :options="alldept"
                 :props="props"
                 v-model='form1.parentId'
               />
             </div>
      </el-form-item>

v-model 双向绑定的内容就是parentId，这是对应的提交表单的内容，options就是对应的内容这里是alldept

   const props = {
      expandTrigger: 'hover',
      label:'name',
      value:'id',
      emitPath:false,
      checkStrictly: true // 只选择选中的节点
      }

这里value就是对应的值 id ，label就是显示的内容name，其他的查阅文档就可以知道了，

checkStrictly 需要注意，如果你有很多层级，如果你想获得最终选择的那个节点的内容，而其他的节点内容不要显示，则需要让checkStrictly：true才可以。否则在后期传递数据的时候，可能会造成数据格式错误。

级联选择器的使用

猜你喜欢