先來看一下效果圖，前面的部分是普通列，“工藝”、“模面”、“結構”三列是查詢得到得動態列
vue部分代碼
關鍵點在於el-select中得v-model部分 需要使用scope.row[scope.column.property]來綁定某一個單元格，否則按網上大部分文章中使用scope.row.xxx會讓整行的下拉都隨某一個下拉值的改變而改變
<el-table
:data="planTemplateList"
border
ref="table"
id="table"
:height="tableHeight"
size="small"
highlight-current-row
>
<!-- moldId -->
<el-table-column
type="index"
label="序號"
align="center"
width="50"
>
</el-table-column>
<el-table-column
prop="makeCode"
label="製件圖號"
show-overflow-tooltip
align="center"
sortable
width="150"
>
</el-table-column>
<el-table-column
prop="makeName"
label="製件名稱"
show-overflow-tooltip
align="center"
sortable
width="150"
>
</el-table-column>
<el-table-column
prop="moldCode"
label="模具制號"
show-overflow-tooltip
align="center"
sortable
width="110"
>
</el-table-column>
<el-table-column
prop="standSet"
label="標準套(C)"
show-overflow-tooltip
align="center"
sortable
width="110"
>
</el-table-column>
<el-table-column v-for="(col, index) in groupColums"
:prop="col.prop"
:label="col.label"
:key="col.prop + index"
show-overflow-tooltip
align="center"
sortable
width="150"
>
<template slot-scope="scope">
<el-select v-model="scope.row[scope.column.property]" @change="(value)=>
{changeCell(value, scope.row, col.prop)}" clearable filterable>
<el-option
v-for="item in designAssignDeptList"
:key="item.key"
:label="item.value"
:value="item.key">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column v-for="(col, index) in groupColums"
:prop="col.prop"
:label="col.label"
:key="index"
align="center"
>
<el-table-column v-for="(itemCol, itemIndex) in planTemplateColums"
v-if="itemCol.parentKey === col.prop"
:prop="itemCol.prop"
:label="itemCol.label"
:key="itemIndex"
show-overflow-tooltip
align="center"
sortable
width="150"
>
<template slot-scope="scope">
<el-select v-model="scope.row[scope.column.property]" clearable filterable>
<el-option
v-for="item in designAssignDeptList"
:key="item.key"
:label="item.value"
:value="item.key">
</el-option>
</el-select>
</template>
</el-table-column>
</el-table-column>
<el-table-column
label="操作"
align="center"
fixed="right"
width="80"
>
<template slot-scope="scope">
<el-button type="danger" @click="clearRow(scope.row)" plain icon="el-icon-
delete" circle size="mini" title="清空"></el-button>
</template>
</el-table-column>
</el-table>
js部分代碼
export default {
name: 'distributeDept',
data () {
return {
planTemplateList: [], // 計劃模板列表
groupColums: [], // 工序組表頭
designAssignDeptList: [] // 設計任務分配部門下拉
}
},
created () {
this.getGroupTitle()
this.getDesignAssignDeptList()
this.getList()
},
mounted () {
},
computed: {
},
methods: {
async getGroupTitle () {
// 獲取工序分組動態列頭
const res = await this.$http.request({ url: this.$api.baseConfig.getDictDataList,
params: {
dictType: 'pln_progress_group'
},
method: 'get' })
const data = res.data
if (data.code === 0) {
this.groupColums.splice(0, this.groupColums.length)
for (var i = 0; i < data.jsonObject.length; i++) {
this.groupColums.push({
label: data.jsonObject[i].dictLabel,
prop: String(data.jsonObject[i].dictValue)
})
}
}
},
async getDesignAssignDeptList () {
// 獲取設計任務分配部門下拉
const res = await this.$http.request({
url: this.$api.pln.getDesignAssignDeptList,
params: {
},
method: 'get'
})
const data = res.data
if (data.code === 0) {
this.designAssignDeptList = data.jsonObject
}
},
async getList () {
// 獲取工序分配列表
this.search_loading = true
const res = await this.$http.request({
url: this.$api.pln.getDistributeDeptList,
params: {
projectIds: this.idString
},
method: 'get'
})
const data = res.data
if (data.code === 0) {
this.search_loading = false
const results = []
let moldId = null
let obj = null
for (let i = 0; i < data.jsonObject.length; i++) {
if (moldId !== data.jsonObject[i].moldId) {
// 新增一行
obj = {
makeCode: data.jsonObject[i].makeCode,
makeName: data.jsonObject[i].makeName,
moldId: data.jsonObject[i].moldId,
moldCode: data.jsonObject[i].moldCode,
standSet: data.jsonObject[i].standSet
}
this.$set(obj, data.jsonObject[i].prop, data.jsonObject[i].value)
moldId = data.jsonObject[i].moldId
results.push(obj)
} else {
// 合併列
this.$set(obj, data.jsonObject[i].prop, data.jsonObject[i].value)
}
}
this.planTemplateList = results
}
},
changeCell (value, row, prop) {
this.planTemplateColums.forEach(item => {
if (item.parentKey === prop) {
// 找到parentKey是prop的列 獲取列的數組 將row中的這些列改值
this.$set(row, item.prop, value)
}
})
},
clearRow (row) {
// 清空當前行
this.groupColums.forEach(item => {
this.$set(row, item.prop, null)
})
this.planTemplateColums.forEach(item => {
this.$set(row, item.prop, null)
})
}
}
}