elment表格中插入输入框,控制输入框的显示与隐藏
elment表格中插入输入框,控制输入框的显示与隐藏 直接上代码
<el-table
:key="TableIndex"
:data="tableData2"
border
stripe
:empty-text="emptytext"
current-row-key="index"
:height="450"
:header-cell-style="{color:rgba(0,0,0,.8),background:#f9f9f9}"
style="width: 100%; height: calc(100% - 40px);">
<el-table-column
min-width=120
align="center"
:show-overflow-tooltip="true"
label="分配数量">
<template slot-scope="scope">
<el-input v-if="scope.row.flag" v-model="scope.row.fenpei_num" placeholder="请输入内容"></el-input>
<span v-else>{
{scope.row.fenpei_num}}</span>
</template>
</el-table-column>
<el-table-column
fixed="right"
align="center"
:show-overflow-tooltip="true"
min-width="120"
label="操作">
<template slot-scope="scope">
<a href="javascript:;" v-if="!scope.row.flag" @click="modifyThe(scope.$index)">修改</a>
<a href="javascript:;" v-else @click="subMit(scope.row,scope.$index)">确定</a>
<a href="javascript:;" @click="deleteList(scope.row)">删除</a>
</template>
</el-table-column>
</el-table>
<script>
data(){
return {
TableIndex: 0,
tableData2:[],
}
},
created(){
this.tableData2 = this.tableData2.map((item, index)=>{
return Object.assign( item, { flag: false, index: index});
})
},
methods:{
// 修改按钮
modifyThe(index){
this.TableIndex ++;
this.$set(this.tableData2[index], flag, true);
},
// 确定按钮
subMit(row,index) {
this.TableIndex ++;
this.$set(this.tableData2[index], flag, false);
}
}
上一篇:
IDEA上Java项目控制台中文乱码
