修改数据,如何将原数据带到输入框

135 阅读1分钟

需求:

  • 对数据进行修改时,将原本的数据显示到输入框中

代码展示

  
<template>
    <div>
        <el-table
      :data="tableData"
      border
      stripe
      height="250"
      style="width:100%">

      <el-table-column
        type="selection"
        width="50">
      </el-table-column>

      <el-table-column
        prop="id"
        label="ID"
        align='center'
        width="70"> 
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>  //数据的ID
        </template>
      </el-table-column>
   
      <el-table-column
        prop="DWMC"
        label="单位名称"
        align='center'
        width="130">
      </el-table-column>

      <el-table-column
        prop="name" 
        label="操作"
        fixed="right"
        align="center"
        width="300">
        <template slot-scope="scope">
          <el-button size='mini' type="primary" @click="changeuser(scope.$index,scope.row,scope.row.id)">修改</el-button>     
          <el-button size='mini' type="danger"  @click="deluser(scope.row.id)">删除</el-button>   
        </template>
      </el-table-column>          
    </el-table>
    </div>
</template>
<script>
    export default{
        data(){
            return {
            	// 绑定数据
                form: {
                    DWMC:'',       
                },
            }
        },
        methods:{
            changeuser(index,row,id){       
                this.form.DWMC = row.DWMC   // 将输入框中的绑定数据替换成表格展示的数据,就完成了需求      
            }
        }
    }
</script>

代码讲解

在这里插入图片描述

效果

在这里插入图片描述

  • 这样就完成需求了