element ui table嵌套多个select,包含动态列
先来看一下效果图,前面的部分是普通列,“工艺”、“模面”、“结构”三列是查询得到得动态列vue部分代码关键点在于el-select中得v-model部分 需要使用scope.row[scope.column.property]来绑定某一个单元格,否则按网上大部分文章中使用scope.row.xxx会让整行的下拉都随某一个下拉值的改变而改变<el-table:...
·
先来看一下效果图,前面的部分是普通列,“工艺”、“模面”、“结构”三列是查询得到得动态列
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)
})
}
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)