今天做了一个需求，饶了不少坑，最后磕磕绊绊搞出来了，留着记录，以后有时间优化
刚开始扫需求的时候感觉挺容易的一个表单，话不多说直接开始撸
<template>
<el-form :model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm">
<el-form-item label="客群名称"
prop="groupName">
<el-input v-model="ruleForm.groupName"></el-input>
</el-form-item>
<el-form-item label="客群备注"
prop="groupRemark">
<el-input v-model="ruleForm.groupRemark"
type="textarea"></el-input>
</el-form-item>
<el-form-item label="数据来源"
prop="dataSource">
<el-radio v-model="ruleForm.dataSource"
label="1">官方数据</el-radio>
<el-radio v-model="ruleForm.dataSource"
label="2">自有数据</el-radio>
</el-form-item>
<el-form-item label="标签"
prop="labelCodes">
<el-cascader :options="options"
:props="props"
clearable
v-model="ruleForm.labelCodes"></el-cascader>
</el-form-item>
<el-form-item>{{isLabelCodes}}</el-form-item>
<el-form-item>
<el-button type="primary"
@click="submitForm('ruleForm')">保存</el-button>
</el-form-item>
</el-form>
</template>
<script>
// 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())
}
},
}
</script>
<style scoped lang='scss'>
.demo-ruleForm {
.el-form-item {
.el-form-item__content {
.el-input,
.el-textarea,
.el-cascader {
width: 500px;
}
}
}
}
</style>
但是后面发现标签选中后要进行回显，性别（男）且年龄（80后、90后）格式为父级（子级）
思路：先把element组件返回的数组合并，将上一级相同的数据抽取为一个对象，再将不同上级合并后的对象插入数组中，然后页面遍历数组回显
<template>
<el-form :model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm">
<el-form-item label="客群名称"
prop="groupName">
<el-input v-model="ruleForm.groupName"></el-input>
</el-form-item>
<el-form-item label="客群备注"
prop="groupRemark">
<el-input v-model="ruleForm.groupRemark"
type="textarea"></el-input>
</el-form-item>
<el-form-item label="数据来源"
prop="dataSource">
<el-radio v-model="ruleForm.dataSource"
label="1">官方数据</el-radio>
<el-radio v-model="ruleForm.dataSource"
label="2">自有数据</el-radio>
</el-form-item>
<el-form-item label="标签"
prop="labelCodes">
<el-cascader :options="options"
:props="props"
clearable
v-model="ruleForm.labelCodes"
@change="isLabelCodes"></el-cascader>
</el-form-item>
<el-form-item v-show="optionsArr.length>0">
<div class="options-list">
<div v-for="(item, index) in optionsArr"
:key="index">
<span>{{index==0?`${item.parName+'（'}`:`且${item.parName+'（'}` }}</span>
<span v-for="(val,ind) in item.name"
:key="ind">
{{ind==item.name.length-1?`${val+'）'}`:`${val+'、'}`}}
</span>
</div>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary"
@click="submitForm('ruleForm')">保存</el-button>
</el-form-item>
</el-form>
</template>
<script>
// 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())
}
},
}
</script>
<style scoped lang='scss'>
.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;
}
</style>
虽然代码写的很蠢但搞定收工
