需求
（1）开发中遇到Cascader 级联选择器选中后给对应值禁用不让选。这里通过动态列表循环渲染Cascader 级联选择器选择框的。每次新增后选中对应值，再点击新增后不让选择之前选中过的数据。
（2）Cascader 级联选择器选中后需要传递除了label和value后的其他参数，这里我们需要使用到生产力值的参数值。通过生产力值乘数量来计算总计的数据。
![在这里插入图片描述](https://img-blog.csdnimg.cn/639f4e8e84494230bdea7f813d32a28f.png
1，实现思路
首先要在选中值的监听事件里面进行调用禁用的方法。然后再调用禁用方法里面通过递归循环，获取选中的数据，递归给已经选中的数据添加disabled=true属性；
Cascader 级联选择器选中后需要传递除了label和value后的其他参数，这里我们可以通过再递归方法里面再添加循环动态列表判断选中的值等于列表里面值然后赋值生产力值produceValue
2，实现代码
<!-- 新建线下生产力 -->
<el-dialog
title="新建线下生产力"
:visible.sync="addofflineproductFormVisible"
width="35%"
>
<el-form
:model="addofflineproductForm"
:rules="addofflineproductFormRules"
ref="addofflineproductForm"
label-width="130px"
class="productbox"
>
<div class="productContentbox" v-if="addofflineproductForm.produceList.length > 0">
<div v-for="(item, index) in addofflineproductForm.produceList" :key="index">
<el-form-item label="申报类型" :prop="'produceList.'+ index +'.produceConfigId' " :rules="{ required: true, message: '请选择申报类型', trigger: 'blur' }" class="subsettypebox">
<el-cascader
v-model="item.produceConfigId"
:options="declarationTypeOptions"
@change="childrentypeChange(item.produceConfigId)"
ref="cascaderMallCatergory"
placeholder="请选择申报类型"
filterable
:show-all-levels="false"
:props="{ emitPath: false }"
>
</el-cascader>
<i @click="addproductClick(item, index)" class="btn-group el-icon-circle-plus-outline"></i>
<i @click="removproductClick(index)" class="btn-group del el-icon-delete" v-show="addofflineproductForm.produceList.length > 1"></i>
</el-form-item>
<el-form-item
label="数量"
:prop="'produceList.'+ index +'.value'"
:rules="{ required: true, message: '请输入申报类型数量', trigger: 'blur' }"
>
<el-input-number @change="typeNumberChange(item.produceConfigId)" style="width: 200px;" size="small" placeholder="输入申报类型数量" :step="1" step-strictly :min="1" v-model="item.value"></el-input-number>
<span>（生产力值：{
{
item.produceValue }}）</span>
</el-form-item>
</div>
</div>
<div class="totalbox">生产力总计：{
{
totalSumAll && totalSumAll.toFixed(2) }}</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="addofflineproductFormVisible = false">取 消</el-button>
<el-button type="primary" @click="addofflineproductSubmitEvent('addofflineproductForm')">确 定</el-button>
</div>
</el-dialog>
data () {
return {
addofflineproductFormVisible: false,
addFormVisibleTitle: '',
getdatacheckTypeList: [],
addofflineproductForm: {
UserId: '',
SetTime: '',
produceList: [
{
value: '',
produceConfigId: ''
}
]
},
declarationTypeOptions: [],
initdeclarationTypeOptions: [],
addofflineproductFormRules: {
},
totalSumAll: ''
}
},
methods: {
// 新建线下生产力
addoffineProductivity () {
this.$store.dispatch('inspection/GetUserOfflineProduceInfo', {
...detailoptions }).then(res => {
if (res.data.list && res.data.list.length > 0) {
this.addofflineproductForm.produceList = res.data.list
this.getprojectlistdisabled()
} else {
this.addofflineproductForm.produceList = [
{
value: '',
produceConfigId: ''
}
]
this.totalSumAll = 0
this.declarationTypeOptions = JSON.parse(JSON.stringify(this.initdeclarationTypeOptions))
}
this.addofflineproductFormVisible = true
this.$nextTick(() => {
this.$refs.addofflineproductForm.clearValidate()
})
})
},
childrentypeChange (val) {
if (val) {
this.getprojectlistdisabled(val)
}
},
// 数量修改获取总计
typeNumberChange (val) {
if (val) {
this.getproductTotalcount()
}
},
// 获取生产力总计求和
getproductTotalcount () {
this.totalSumAll = 0
this.addofflineproductForm.produceList.map(item => {
if (item.produceValue) {
this.totalSumAll += Number(item.value) * (item.produceValue)
}
return item
})
},
// 获取是否禁用项目列表
getprojectlistdisabled (val) {
let newDataoptions = []
newDataoptions = this.addDisabledForSelect(this.declarationTypeOptions, val)
this.declarationTypeOptions = newDataoptions
this.getproductTotalcount()
},
// 处理返回数据，递归给已经选中的数据添加disabled=true属性
addDisabledForSelect (arr, val) {
const typesarry = []
this.addofflineproductForm.produceList.forEach(item => {
if (item.produceConfigId) {
typesarry.push(item.produceConfigId)
}
})
const newArr = JSON.parse(JSON.stringify(arr))
const newArrselect = JSON.parse(JSON.stringify(typesarry))
newArr.forEach((item, index) => {
if (newArrselect.indexOf(item.value) !== -1) {
item.disabled = true
if (val) {
this.addofflineproductForm.produceList.forEach(itemchild => {
if (val === itemchild.produceConfigId) {
itemchild.produceValue = item.produceValue
}
})
}
} else {
item.disabled = false
}
// 有无children项
if (item.children && item.children.length !== 0) {
let newChildren = []
newChildren = this.addDisabledForSelect(item.children, val)
item.children = newChildren
}
})
return newArr
},
// 新增申报类型
addproductClick (item, index) {
if (!item.produceConfigId) {
this.$message.warning('请先选择质检专员再进行新增操作！')
} else {
this.addofflineproductForm.produceList.push({
value: '',
produceConfigId: ''
})
}
},
addofflineproductSubmitEvent (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('成功！')
} else {
return false
}
})
},
// 删除
removproductClick (index) {
this.addofflineproductForm.produceList.splice(index, 1)
this.getprojectlistdisabled()
}
},