vue中级联选择器回填_vue element 级联选择器，复杂操作，异步加载所有级联选项，并回显 解决因id 有部分重复后导致的bug问题 无法回显的问题...

width="600px"

:title="dialogInfo.title"

:close-on-click-modal="false"

:visible="true"

:before-close="closeSelf"

>

class="create-form"

:model="dataForm"

:rules="dataRule"

ref="ruleForm"

label-width="110px"

>

v-model="dataForm.courseName"

maxlength="100"

show-word-limit

placeholder="请输入课程名称"

>

v-if="dialogInfo.pageState === 'edit'"

label="讲师:"

prop="teacherName"

>

{ {

dataForm.teacherName

}}

修改

小学

初中

高中

v-model="dataForm.grade"

@change="handleGrade"

placeholder="请选择年级"

>

v-for="(item, index) in gradeArr"

:key="index"

:label="item.name"

:value="item.code"

>

v-if="showCascader"

:disabled="!editFlag"

ref="cascader"

class="cascader"

v-model="dataForm.courseNameArr"

:props="props"

@change="chooseCourse"

>

请先选择学段和年级，再选择学科！

v-if="dialogInfo.pageState !== 'edit'"

label="课程简介:"

>

type="textarea"

placeholder="请输入课程简介"

v-model="dataForm.courseIntroduce"

maxlength="50"

:rows="2"

show-word-limit

>

取消

确定

width="800px"

title="选择讲师"

:visible.sync="innerVisible"

append-to-body

>

v-model="realName"

placeholder="请输入姓名"

>

查询

:columnsData="columnsData"

:tableData="tableData"

>

:pageInfo="pageInfo"

v-if="tableData.length > 0"

@getNewPage="getNewData"

>

import CommonTable from '@/components/common/common-table';

import pagenation from '@/components/common/pagenation';

import { timeFormat, getDateTime } from '@/utils';

import { dateUtils } from '@/utils/dateUtils';

export default {

name: 'dialog-editCourseTable',

components: { CommonTable, pagenation },

data() {

let self = this;

return {

pageInfo: {

total: 0,

pageSize: 10,

pageNum: 1

},

innerVisible: false,

showCascader: true,

dataForm: {

courseNameArr: [],

sn: null, //为空时为新增，否则为修改