| 级联下拉数据回显 | 您所在的位置：网站首页 › 表格怎么制作美观 › 级联下拉数据回显 |
级联下拉数据回显
|
今天做了一个需求，饶了不少坑，最后磕磕绊绊搞出来了，留着记录，以后有时间优化 刚开始扫需求的时候感觉挺容易的一个表单，话不多说直接开始撸 官方数据 自有数据 {{isLabelCodes}} 保存 // PersonForm的类 class PersonForm { // 值 constructor() { this.groupId = '' //编辑时必填 this.groupName = '' //客群名称 this.groupRemark = '' //客群备注 this.dataSource = '1' //数据来源（1-官方数据，2-自有数据） this.labelCodes = [] //标签编码 } // 验证方法 static getRule() { return { groupName: [{ required: true, message: '客群名称不能为空', trigger: 'blur' }], labelCodes: [{ type: 'array', required: true, message: '请选择业务类型', trigger: 'change' }] } } } import CustomerGroupManagement from '@/api/bigDataManage/customerGroupManagement' import lodash from 'lodash'; const CM = CustomerGroupManagement const ERROR_CODE = process.env.ERROR_CODE export default { name: 'addOrEdit', props: ['addOrEdit'], data() { return { ruleForm: new PersonForm(), rules: PersonForm.getRule(), props: { multiple: true }, options: [], optionsArr: [] } }, watch: { }, computed: { // labelCodes回显 isLabelCodes() { let labelCodes = JSON.parse(JSON.stringify(this.ruleForm.labelCodes)) // 如果为空数组 if (labelCodes.length === 0) return let optionsArr = this.treeToArray(lodash.cloneDeep(this.options)), array = '' for (let i = 0; i < labelCodes.length; i++) { // 将选中项依次遍历 labelCodes[i].forEach((item, index) => { let str if (index === 0) { str = this.isLabelCodesInfo(item, optionsArr).label + '(' } else if (index === labelCodes[i].length - 1) { str = this.isLabelCodesInfo(item, optionsArr).label + ');' } else { str = this.isLabelCodesInfo(item, optionsArr).label + '、' } array += str }) } return array } }, created() { this.getBigLabels() }, methods: { // 判断数组label isLabelCodesInfo(keys, options) { let o = {} o = options.find(item => item.value == keys ) return o }, // 数组铺平 treeToArray(data) { let tem = []; Array.from(data).forEach((record) => { tem.push(record); if (record.children && record.children.length > 0) { const children = this.treeToArray(record.children); tem = tem.concat(children); delete record.children; } }); return tem; }, // 获取标签树 getBigLabels() { CM.bigLabels().then((res) => { if (res.data.code === ERROR_CODE) { console.log(res.data.data) this.options = res.data.data } }) }, // 提交 submitForm(formName) { console.log(this.ruleForm) this.$refs[formName].validate((valid) => { if (valid) { if (this.addOrEdit) { //新增 let returnedTarget = lodash.cloneDeep(this.ruleForm) returnedTarget.labelCodes = this.saveLabelCodes(returnedTarget.labelCodes) console.log(returnedTarget) CM.bigGroupsAdd(returnedTarget).then((res) => { console.log(res) if (res.code === ERROR_CODE) { this.$parent.handleClose() } }) } else { //编辑 } } else { console.log('error submit!!') return false } }) }, // 保存标签处理函数 saveLabelCodes(data) { return data.map(item => item.pop()) } }, } .demo-ruleForm { .el-form-item { .el-form-item__content { .el-input, .el-textarea, .el-cascader { width: 500px; } } } } 复制代码但是后面发现标签选中后要进行回显，性别（男）且年龄（80后、90后）格式为父级（子级） 思路：先把element组件返回的数组合并，将上一级相同的数据抽取为一个对象，再将不同上级合并后的对象插入数组中，然后页面遍历数组回显 官方数据 自有数据 {{index==0?`${item.parName+'（'}`:`且${item.parName+'（'}` }} {{ind==item.name.length-1?`${val+'）'}`:`${val+'、'}`}} 保存 // PersonForm的类 class PersonForm { // 值 constructor() { this.groupId = '' //编辑时必填 this.groupName = '' //客群名称 this.groupRemark = '' //客群备注 this.dataSource = '1' //数据来源（1-官方数据，2-自有数据） this.labelCodes = [] //标签编码 } // 验证方法 static getRule() { return { groupName: [{ required: true, message: '客群名称不能为空', trigger: 'blur' }], labelCodes: [{ type: 'array', required: true, message: '请选择业务类型', trigger: 'change' }] } } } import CustomerGroupManagement from '@/api/bigDataManage/customerGroupManagement' import lodash from 'lodash'; const CM = CustomerGroupManagement const ERROR_CODE = process.env.ERROR_CODE export default { name: 'addOrEdit', props: ['addOrEdit'], data() { return { ruleForm: new PersonForm(), rules: PersonForm.getRule(), props: { multiple: true }, options: [], // 标签回显 optionsArr: [] } }, watch: { addOrEdit(neww, oldd) { if (neww) { //新增 this.ruleForm = { name: '', } } else { //编辑 } }, }, computed: { }, created() { console.log(this.addOrEdit) this.getBigLabels() }, methods: { // labelCodes回显 isLabelCodes() { let labelCodes = JSON.parse(JSON.stringify(this.ruleForm.labelCodes)) // 如果为空数组 if (labelCodes.length === 0) return this.optionsArr = [] let obj = {}, arr = [] labelCodes.forEach(item => { if (!obj[item[0]]) { obj[item[0]] = { parName: this.isLabelCodesInfo(item[0]), name: [] } } obj[item[0]].name.push(this.isLabelCodesInfo(item[1])) }) for (let i in obj) { arr.push(obj[i]) } this.optionsArr = arr }, // 判断数组label isLabelCodesInfo(keys) { let optionsArr = this.treeToArray(lodash.cloneDeep(this.options)) let o = {} o = optionsArr.find(item => item.value == keys ) return o.label }, // 数组铺平 treeToArray(data) { let tem = []; Array.from(data).forEach((record) => { tem.push(record); if (record.children && record.children.length > 0) { const children = this.treeToArray(record.children); tem = tem.concat(children); delete record.children; } }); return tem; }, // 获取标签树 getBigLabels() { CM.bigLabels().then((res) => { if (res.data.code === ERROR_CODE) { console.log(res.data.data) this.options = res.data.data } }) }, // 提交 submitForm(formName) { console.log(this.ruleForm) this.$refs[formName].validate((valid) => { if (valid) { if (this.addOrEdit) { //新增 let returnedTarget = lodash.cloneDeep(this.ruleForm) returnedTarget.labelCodes = this.saveLabelCodes(returnedTarget.labelCodes) console.log(returnedTarget) CM.bigGroupsAdd(returnedTarget).then((res) => { console.log(res) if (res.code === ERROR_CODE) { this.$parent.handleClose() } }) } else { //编辑 } } else { console.log('error submit!!') return false } }) }, // 保存标签处理函数 saveLabelCodes(data) { return data.map(item => item.pop()) } }, } .demo-ruleForm { .el-form-item { .el-form-item__content { .el-input, .el-textarea, .el-cascader { width: 500px; } } } } .options-list { font-size: 14px; display: flex; flex-wrap: wrap; background: #e4e7ed; border: 1px solid #d7dae2; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); padding: 0 20px; } 复制代码虽然代码写的很蠢但搞定收工 |
【本文地址】
公司简介
联系我们