element table加减列

javascript 复制代码

// 有个特别注意的地方,下面这行代码,key一定绑的是item,千万不要绑定index,不然就会出现异常
//<el-table-column v-for="(item,index) in titleList" :key="item"  min-width="150" align="center">
 <el-table fit :data="definitionList2" border style="margin-top:10px">
                        <el-table-column prop="payeeType" label="车牌号"  fixed="left" width="100" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.payeeType"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="customName" label="超期租金" width="100" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.customName"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="carNo" label="违约金" min-width="150" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.carNo"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="title" label="违章费" min-width="150" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.title"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="pushType2" label="车损费用" min-width="150" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.pushType2"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="pushType2" label="加速折旧费" min-width="150" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.pushType2"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="pushType2" label="超里程费" min-width="150" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.pushType2"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="pushType2" label="尾款" min-width="150" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.pushType2"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="pushType2" label="客户理赔款" min-width="150" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.pushType2"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="pushType2" label="其他扣款费用" min-width="150" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.pushType2"></el-input>
                            </template>
                        </el-table-column>
                        // 前面是固定列,后面是可以加减的列
                        <el-table-column v-for="(item,index) in titleList" :key="item"  min-width="150" align="center">
                            <template slot="header" slot-scope="scope">
                               <span>{{ item }}</span>
                               <i class="el-icon-delete delet_tit" @click="titDelet(item)" ></i>
                            </template>
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.item" ></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                    // 新增弹框
                    <el-dialog title="添加表格列" :visible.sync="dialogFormVisible" :modal='false' :close-on-click-modal="false" width="30%">
            <el-input v-model="colName" placeholder="请输入要增加的列名" style="width: 100%;"></el-input>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="getcol()">确 定</el-button>
            </div>
        </el-dialog>

javascript 复制代码

// 这是方法
 // 添加费用项类型
        addFess(){
            this.dialogFormVisible = true
        },
        getcol(){
            this.addCol()
            this.dialogFormVisible = false
            this.colName = ''
        },
        //新增列
        addCol(){
            this.dialogFormVisible = true
            if(this.colName !==''){
                this.titleList.push(this.colName)
            }
        },
        // 删除列
        titDelet(value){
            this.titleList.map((res,index)=>{
                if(res==value){
                    this.titleList.splice(index,1)
                    return
                }
            })
            
            

        },