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项目控制台中文乱码