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, //为空时为新增，否则为修改

courseName: '',

teacherName: '',

teacherId: '',

subject: '', //科目

grade: '', //年级

phase: '03', //学段

volume: '', //册别

edition: '', //版本

book: '', //教材

bookUnit: '', //教材目录

courseIntroduce: '' //课程简介

},

dataRule: {

courseName: [

{ required: true, message: '课程名称不能为空', trigger: 'change' }

],

courseNameArr: [

{ required: true, message: '学科不能为空', trigger: 'change' }

],

teacherName: [

{ required: true, message: '请选择讲师', trigger: 'change' }

],

grade: [{ required: true, message: '请选择年级', trigger: 'change' }],

phase: [{ required: true, message: '请选择学段', trigger: 'change' }]

},

gradeArr: [],

realName: '',

tableData: [],

columnsData: [

{

label: '姓名',

prop: 'userName',

130

},

{

label: '性别',

130,

formatter: row => {

let sex = '男';

if (row.genderCode === '0') {

sex = '男';

} else if (row.genderCode === '1') {

sex = '女';

} else {

sex = '未知';

}

return sex;

}

},

{

label: '账号',

prop: 'loginName',

146,

showOverflowTooltip: true

},

{

label: '授课关系',

170,

prop: 'relative'

},

{

type: 'options',

label: '操作',

align: 'center',

render: (h, { row }) => {

const checkBtn = h(

'a',

{

class: 'btn-option',

on: {

click: () => {

this.chooseTeacher(row); //选择

}

}

},

'选择'

);

const disabledText = h(

'a',

{

class: 'btn-option disabled',

on: {}

},

'该老师已有课程，不可选择'

);

let operationViews = [];

if (row.status === 1) {

operationViews.push(disabledText);

} else {

operationViews.push(checkBtn);

}

return h(

'div',

{

class: 'table-opt-btns'

},

operationViews

);

}

}

],

props: {

value: 'code',

label: 'name',

lazy: true,

lazyLoad(node, resolve) {

self.chooseCourseHandle(node, resolve);

}

}

};

},

props: {

checkedArr: {

type: Array,

default: () => {

return [];

}

},

dialogInfo: {

type: Object,

default: () => {

return {

title: '信息设置',

pageState: 'edit'

};

}

},

weekInfo: {

type: Object,

default: () => {

return {};

}

},

tdItem: {

type: Object,

default: () => {

return {};

}

},

timeItem: {

type: Object,

default: () => {

return {};

}

},

selfTeacher: {

type: Boolean,

default: false

}

},

watch: {},

computed: {

editFlag() {

return !!(this.dataForm.grade && this.dataForm.phase);

}

},

created() {

if (!this.selfTeacher) {

this.getTeachersPage();

}

/* 编辑该课程时 设置form 信息*/

if (this.tdItem.teacherId) {

this.resetting();

}

this.getGrade();

},

methods: {

resetting() {

this.dataForm = Object.assign(this.dataForm, this.tdItem);

this.dataForm.courseIntroduce == '0'

? (this.dataForm.courseIntroduce = '')

: null;

this.dataForm.courseNameArr = [

this.tdItem.subject + 'subjects',

this.tdItem.edition + 'editions',

this.tdItem.volume + 'volums',

this.tdItem.book + 'books',

this.tdItem.bookUnit + 'units'

];

},

//分页

getNewData(num) {

this.pageInfo.pageNum = num;

this.getTeachersPage();

},

/* 点击查询 获取老师列表 */

searchList() {

this.pageInfo.pageNum = 1;

this.getTeachersPage();

},

/* 获取老师列表 */

getTeachersPage() {

let nowTime = dateUtils.getDayByWeekDay(

this.weekInfo.weekCount,

this.tdItem.dayNum

);

this.$api['course/getTeachersPage']({

realName: this.realName,

pageNum: this.pageInfo.pageNum,

pageSize: this.pageInfo.pageSize,

startTime: getDateTime(nowTime + ' ' + this.timeItem.startTime),

endTime: getDateTime(nowTime + ' ' + this.timeItem.endTime),

dayNum: this.tdItem.dayNum

})

.then(res => {

this.pageInfo.total = res.total;

this.tableData = res.list;

})

.catch(err => {

// this.$message.error(err);

});

},

/* 提交表单 */

dataFormSubmit() {

this.$refs['ruleForm'].validate(valid => {

if (valid) {

this.$emit('setCourseInfo', this.dataForm);

this.$parent.showDialog = false;

} else {

console.log('error submit!!');

return false;

}

});

},

/* 关闭弹框 */

closeSelf() {

this.$parent.showDialog = false;

},

/* 打开老师列表弹框 */

showChildDialog() {

this.innerVisible = true;

},

/* 选择老师方法 */

chooseTeacher(row) {

this.dataForm.teacherId = row.id;

this.dataForm.teacherName = row.userName;

this.innerVisible = false;

this.$refs.ruleForm.validateField('teacherName');

},

/*级联选择器 选择课程的学科等  */

chooseCourse(data) {

let nodeArr = this.$refs.cascader.getCheckedNodes();

let courseName = '';

let nameArr = nodeArr[0].pathLabels;

let idArr = nodeArr[0].path;

// let bookInfo = nodeArr[0].parent;

courseName = nameArr[4] + '-' + nameArr[3];

this.dataForm.courseName = courseName;

this.dataForm.subject = idArr[0].replace('subjects', '');

this.dataForm.edition = idArr[1].replace('editions', '');

this.dataForm.volume = idArr[2].replace('volums', '');

this.dataForm.book = idArr[3].replace('books', '');

this.dataForm.bookUnit = idArr[4].replace('units', '');

this.$refs.ruleForm.validateField('courseName');

},

/* 获取年级 */

getGrade(val) {

if (val) {

this.$nextTick(() => {

this.dataForm.grade = '';

this.dataForm.courseNameArr = [];

this.$refs.cascader.$children[1].loadCount = 0;

this.$refs.cascader.$children[1].menus = [];

this.$refs.cascader.$children[1].lazyLoad();

});

}

// this.showCascader = false;

// this.showCascader = true;

this.$api['common/getGrades']({

phase: this.dataForm.phase

})

.then(res => {

this.gradeArr = res;

})

.catch(err => {

// this.$message.error(err);

});

},

/* 下拉值改变 将下方学科级联给清空 */

handleGrade(val) {

this.dataForm.courseNameArr = [];

this.$nextTick(() => {

this.$refs.cascader.$children[1].loadCount = 0;

this.$refs.cascader.$children[1].menus = [];

this.$refs.cascader.$children[1].lazyLoad();

});

},

/* 级联选择器的 回调 根据返回的node对象中的level的值进行判断 */

chooseCourseHandle(node, resolve) {

if (node.level == 0) {

this.getSubjects(node, resolve);

} else if (node.level == 1) {

this.getEditions(node, resolve);

} else if (node.level == 2) {

this.getVolums(node, resolve);

} else if (node.level == 3) {

this.getBooks(node, resolve);

} else if (node.level == 4) {

this.getBookUnits(node, resolve);

}

},

/* 获取学科 */

getSubjects(node, resolve) {

this.$api['common/getSubjects']({})

.then(res => {

res.forEach(item => {

item.leaf = false;

item.code = item.code + 'subjects';

});

resolve(res);

})

.catch(err => {

// this.$message.error(err);

});

},

/*获取教材版本数据 */

getEditions(node, resolve) {

this.dataForm.subject = node.value.replace('subjects', '');

this.$api['common/getEditions']({

phase: this.dataForm.phase,

subject: this.dataForm.subject

})

.then(res => {

res.forEach(item => {

item.leaf = false;

item.code = item.code + 'editions';

});

resolve(res);

})

.catch(err => {

// this.$message.error(err);

});

},

/*获取册别数据 */

getVolums(node, resolve) {

this.dataForm.subject = node.path[0].replace(/subjects/g, '');

this.dataForm.edition = node.value.replace('editions', '');

this.$api['common/getVolums']({

phase: this.dataForm.phase,

subject: this.dataForm.subject,

edition: this.dataForm.edition

})

.then(res => {

res.forEach(item => {

item.leaf = false;

item.code = item.code + 'volums';

});

resolve(res);

})

.catch(err => {

// this.$message.error(err);

});

},

/*获取课本数据 */

getBooks(node, resolve) {

this.dataForm.subject = node.path[0].replace(/subjects/g, '');

this.dataForm.volume = node.value.replace('volums', '');

this.$api['common/getBooks']({

phase: this.dataForm.phase,

subject: this.dataForm.subject,

edition: this.dataForm.edition,

volume: this.dataForm.volume

// grade: this.dataForm.grade

})

.then(res => {

res.forEach(item => {

item.leaf = false;

item.code = item.bookCode + 'books';

item.name = item.bookName;

});

resolve(res);

})

.catch(err => {

// this.$message.error(err);

});

},

/*获取课本目录数据 */

getBookUnits(node, resolve) {

this.dataForm.bookCode = node.value.replace('books', '');

this.$api['common/getBookUnits']({

bookCode: this.dataForm.bookCode

})

.then(res => {

res.forEach(item => {

item.leaf = true;

item.code = item.code + 'units';

});

resolve(res);

})

.catch(err => {

// this.$message.error(err);

});

}

}

};

.dialog-cont {

/deep/.el-cascader {

line-height: 30px;

}

}

/deep/.el-table__row {

.cell {

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

}

}

.cascader {

width: 400px;

position: relative;

}

.teacher-holder {

margin-right: 10px;

}

.icon-edit {

background: url('../../assets/images/icon/edit.png');

width: 15px;

height: 16px;

display: inline-block;

margin-right: 5px;

margin-bottom: -2px;

}

.edit {

line-height: 24px;

color: #228cf9;

cursor: pointer;

}

.course-name-box {

display: inline-block;

background-color: #fff;

border-radius: 4px;

border: 1px solid #dcdfe6;

color: #606266;

font-size: inherit;

height: 30px;

line-height: 30px;

padding: 0 15px;

-webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

width: 400px;

}

.tip-message {

font-size: 12px;

display: inline-block;

padding-left: 18px;

background: url('../../assets/images/icon/icon-tip.png') no-repeat left 2px;

height: 16px;

line-height: 16px;

margin-left: 4px;

color: #999999;

position: relative;

bottom: 2px;

}