Vue ElementUI Select 选择器实现动态options

[code]<template>
<el-dialog
:title="!dataForm.id ? '新增' : '修改'"
:close-on-click-modal="false"
width="80%"
:visible.sync="visible">
<el-table :data="gridData">
<el-table-column label="操作" width="50" align="center">
<template slot-scope="scope">
<el-button  type="text" @click="deleteRow(scope.$index, gridData)">
<i class="el-icon-remove"></i>
</el-button>
</template>
</el-table-column>
<el-table-column label="机构名称" >
<template slot-scope="scope">
{{mechanismAname}}
</template>
</el-table-column>
<el-table-column label="机构名称" >
<template slot-scope="scope">
<el-select :disabled="scope.row.mechanismB!=''" v-model="gridData[scope.$index].mechanismB" placeholder="请输入机构名称">
<el-option
v-for="item in (scope.row.mechanismB!=''?options:optionsRest)"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="权重(%)" align="center" width="150">
<template slot-scope="scope">
<el-input-number ref="numberA" v-model="gridData[scope.$index].weightA" @change="handleChange($event, scope.row,'weightB')" :min="0" :max="100" label="权重"></el-input-number>
</template>
</el-table-column>
<el-table-column label="权重(%)" align="center" width="150">
<template slot-scope="scope">
<el-input-number v-model="gridData[scope.$index].weightB" @change="handleChange($event, scope.row,'weightA')" :min="0" :max="100" label="权重"></el-input-number>
</template>
</el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button type="primary" icon="el-icon-plus" circle size="mini" style="float:left;" @click="addRow"></el-button>
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
</span>
</el-dialog>
</template>

<script>
export default {
data() {
return {
visible: false,
dataForm: {
id: 0
},
dataRule: {
mechanismA: [
{ required: true, message: '机构A_ID不能为空', trigger: 'blur' }
],
mechanismB: [
{ required: true, message: '机构B_ID不能为空', trigger: 'blur' }
],
weight: [{ required: true, message: '权重不能为空', trigger: 'blur' }]
},

gridData: [],
options: [],
// 机构A名称
mechanismAname: '',
// 机构A id
mechanismA: '',
// 请求接口方式update or save
mode: 'save'
}
},
methods: {
init(id) {
this.dataForm.id = id || 0
this.gridData = []
this.visible = true
// 获取options
this.$http({
url: this.$http.adornUrl(`/ydey/ydeyweight/findMechanismListNoPage`),
method: 'get',
params: this.$http.adornParams({})
}).then(({ data }) => {
this.options = data
this.mechanismAname = data[0].name
this.mechanismA = data[0].id
})
// 获取权重列表
this.$http({
url: this.$http.adornUrl(`/ydey/ydeyweight/getMechanismList`),
method: 'post',
data: this.$http.adornData({
id: this.dataForm.id
})
}).then(({ data }) => {
if (data.length) {
let arr = []
data.forEach(element => {
let obj = {}
obj.mechanismA = element.mechanismA
obj.mechanismB = element.mechanismB
let arr2 = element.weight.split(',')
console.log(arr2)
obj.weightA = arr2[0]
obj.weightB = arr2[1]
arr.push(obj)
})
this.gridData = arr
this.mode = 'update'
} else {
this.mode = 'save'
}
})
},
// 表单提交
dataFormSubmit() {
let params = []
this.gridData.forEach(element => {
let obj = {}
obj.mechanismA = element.mechanismA
obj.mechanismB = element.mechanismB
let arr = [element.weightA, element.weightB]
obj.weight = arr.join(',')
params.push(obj)
})
this.$http({
url: this.$http.adornUrl(`/ydey/ydeyweight/${this.mode}`),
method: 'post',
data: this.$http.adornData({
id: this.dataForm.id,
ydeyWeightDetailEntity: params
})
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
} else {
this.$message.error(data.msg)
}
})

//   }
// })
},
addRow() {
var len = this.gridData.length - 1
if (
(this.gridData.length === 0 || this.gridData[len].mechanismB != '') &&
this.optionsRest.length > 0
) {
this.gridData.push({
mechanismA: this.mechanismA,
mechanismB: '',
weightA: '',
weightB: ''
})
}
},
handleChange(value, scope, type) {
scope[type] = 100 - value
},
deleteRow(index, rows) {
console.log(rows)
this.$confirm(`确定对${rows[index].name}项进行删除操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
rows.splice(index, 1)
})
.catch(() => {})
}
},
computed: {
// 动态改变options
optionsRest() {
return this.options.filter(item => {
if (item.name === this.mechanismAname) {
return false
} else {
return this.gridData.every(value => {
return value.mechanismB !== item.id
})
}
})
}
}
}
</script>

<style scoped>
.el-icon-remove {
color: red;
font-size: 20px;
}
.el-input-number {
width: 120px;
}
</style>

1. 后台获取options数据
2. 计算属性定义一个optionsRest方法，options数据和griddata数据比较。griddata里包含options里的数据则利用filter方法过滤掉
3. @change="handleChange($event, scope.row,'weightB')" , $event传入当前值，实时改变input框内容。