目前需求是列是动态显示的,如果是单纯的列很好搞,直接循环,需求是每个列的格式不一样,有的列是文字,有的是输入框,有的是计算框,
具体需求如下图:有空给出注释解释
直接上代码:TreeTableNew.vue
<template>
<div>
<el-table :data="opt.data" style="width: 100%" :row-key="opt.key" border>
<template v-for="(column, index) in opt.columns">
<el-table-column :prop="column.key" :key="column.key" :label="column.label">
<template slot-scope="scope">
<el-input-number
v-if="column.showFlag.isnumber"
v-model="scope.row.inputNum"
controls-position="right"
:min="1"
></el-input-number>
<el-input v-else-if="column.showFlag.isinput" v-model="scope.row[column.key]"/>
<span v-else>{
{scope.row[column.key]}}</span>
</template>
</el-table-column>
</template>
</el-table>
</div>
</template>
<script>
export default {
props: {
opt: {
type: Object
}
},
data() {
return {};
},
methods: {}
};
</script>
主要代码解释:
循环数据:
opt.data是循环的列的数据,和正常使用一样(正常固定列你也得这么用),就是下面的一行4列的值比如code:'1#'、adjust:'50'
循环列属性:
使用for循环动态扩展列,列的属性封装在opt.columns里。可以很清楚的看出 opt.data和opt.columns的联系, opt.columns有5个属性key,正好对应了opt.data的5个值
<template v-for="(column, index) in opt.columns">
<el-table-column :prop="column.key" :key="column.key" :label="column.label">
列的类型判断:
这个主要通过opt.columns里的showFlag进行判断,可以自己根据自己的需要来
这样的话,主要的数据结构都是后台返回,前台不用动就可以实现动态列扩展。
使用组件的父页面:
<TreeTableNew :opt="opt"></TreeTableNew>
数据区域:
opt: {
data:[
{
code:'1#',
// basic:'50',
// choice:'10',
adjust:'50',
target:'4848',
actual:'5000',
},
{
code:'2#',
// basic:'40',
//choice:'10',
adjust:'40',
target:'4000',
actual:'4010',
},
{
code:'3#',
adjust:'50',
target:'5000',
actual:'5010',
}
],
columns: [
{
key: 'code',
label: '站',
showFlag:{
isnumber:false,
isinput:false,
},
},
{
key: 'adjust',
label: '调整',
showFlag:{
isnumber:true,
isinput:false,
},
},
{
key: 'target',
label: '目标',
showFlag:{
isnumber:false,
isinput:true,
},
},
{
key: 'actual',
label: '实际',
showFlag:{
isnumber:false,
isinput:true,
},
}
],
key: "id",
},