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);
							     }
			    }
经验分享 程序员 微信小程序 职场和发展