element 级联选择器回显问题

这是页面图,想要进行页面绑定回显,想问问怎么实现
image.png
页面:

<el-form-item label="选择菜单" prop="menuIds">
          <el-cascader
          v-model="roleActionVo.menuIds"
            :options="menuList"
            :props="props"
            clearable>
          </el-cascader>
        </el-form-item>

js:

props: {
                label: 'title',
                value: 'menuId',
                children: 'requireExtends',
                multiple: true,
                checkStrictly: true,
                emitPath: false
            }
阅读 96
评论
    2 个回答
    • 36

    v-model的值
    [['a','b']]
    这样就绑定了bName
    或者props里面加一个emitPath:'false',v-model就是
    ['b']

    <template>
      <div style="width:800px;margin:auto">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="选择">
            <el-cascader
              v-model="form.select"
              :options="options"
              :props="props"
            ></el-cascader>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">选中测试21</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          props: {
            expandTrigger: "hover",
            multiple: true,
          },
          form: {
            select: "",
          },
          options: [
            {
              value: "ceshi1",
              label: "测试1",
              children: [
                {
                  value: "ceshi11",
                  label: "测试11",
                },
                {
                  value: "ceshi12",
                  label: "测试12",
                },
              ],
            },
            {
              value: "ceshi2",
              label: "测试2",
              children: [
                {
                  value: "ceshi21",
                  label: "测试21",
                },
                {
                  value: "ceshi22",
                  label: "测试22",
                },
              ],
            },
          ],
        };
      },
      methods: {
        onSubmit() {
          this.form.select = [["ceshi2", "ceshi21"]];
          //emitPath:false
          //this.form.select = ['ceshi21]
        },
      },
    };
    </script>