element el-cascader设置默认值

最新推荐文章于 2025-05-10 17:06:50 发布

转载最新推荐文章于 2025-05-10 17:06:50 发布 · 8.9k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/robinunix/p/11045442.html

文章标签：

#javascript #ui #ViewUI

在 Element UI 的级联选择器(cascader)中设置默认值需要注意v-model绑定的是数组，并且默认值应为label对应的value。例如，若label对应的value为空字符串，则设置默认值全选需设为''。若希望页面初始显示'指南/设计原则/一致'，则应正确设置对应的value。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文：https://www.jianshu.com/p/b690d7fe6ec0

注意两点就行了

<el-form-item label="AP名称">
              <el-cascader
                v-model="ruleForm.ap"
                :options="apOptions"
                change-on-select>
              </el-cascader>
            </el-form-item>

apOptions:[
          {
            value:'',
            label: '全部'
          }
          ,{
            value: 'zhinan',
            label: '指南',
            children: [
              {
              value: 'shejiyuanze',
              label: '设计原则',
              children: [{
                value: 'yizhi',
                label: '一致'
              }, {
                value: 'fankui',
                label: '反馈'
              }, {
                value: 'xiaolv',
                label: '效率'
              }, {
                value: 'kekong',
                label: '可控'
              }]
            }, {
              value: 'daohang',
              label: '导航',
              children: [{
                value: 'cexiangdaohang',
                label: '侧向导航'
              }, {
                value: 'dingbudaohang',
                label: '顶部导航'
              }]
            }]
          }
          ]

第一点v-model="ruleForm.ap"绑定得是数组

第二点设置默认值得时候设置得是label对应得value
如上面得数据我想设置默认值是全部就要如下设置

this.ruleForm.ap = ['']

因为label对应得value是''

再举个例子想在页面默认显示指南/设计原则/一致

this.ruleForm.ap = ['zhinan','shejiyuanze','yizhi']

转载于:https://www.cnblogs.com/robinunix/p/11045442.html

element el-cascader设置默认值

再举个例子想在页面默认显示 指南/设计原则/一致

再举个例子想在页面默认显示指南/设计原则/一致