At present, the requirement is that the columns are displayed dynamically. If it is a simple column, it is easy to do it. It is directly looped. The requirement is that the format of each column is different. Some columns are text, some are input boxes, and some are calculation boxes.
The specific requirements are as shown in the figure below: give comments and explanations when available
Directly on the code: 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>
Main code explanation:
Cycle data:
opt.data is the data of the circular column, which is the same as the normal use (you have to use the normal fixed column), which is the value of the following row and 4 columns, such as code:'1#', adjust:'50'
Loop column properties:
Use a for loop to dynamically expand the column, and the attributes of the column are encapsulated in opt.columns. You can clearly see the connection between opt.data and opt.columns, opt.columns has 5 attribute keys, which correspond to the 5 values of opt.data
<template v-for="(column, index) in opt.columns">
<el-table-column :prop="column.key" :key="column.key" :label="column.label">
Column type judgment:
This is mainly judged by showFlag in opt.columns, you can make it according to your own needs
In this case, the main data structure is returned in the background, and dynamic column expansion can be achieved without moving the foreground.
Use the parent page of the component:
<TreeTableNew: opt = "opt"> </TreeTableNew>
Data area:
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",
},