element-ui 中的dialog弹出的 输入框 如何获取表格值？

Question

使用饿了么的Ui组件碰到一个问题不知道怎么解决，

问题是这样的：表格里有一个按钮点击后会弹出弹框，弹框显示的时候希望里面的input可以对应显示表格字段的内容（内容与表格相同）。现在是不知道怎样获取表格中的对应内容并赋值给dialog中的input。
就像最后一张图一样，点击哪一个按钮就可以获取相应的内容。接触vue和element都不久，希望能给个思路。

Answer 1

这个把点击的那一行的数据和索引当成参数，传过去就可以了！

        <!--表格-->
        <el-table :data="list" border style="width: 100%" >

            <el-table-column label="序号" width="180">
                <template scope="scope">
                    <a href="javascript:;">{{scope.row.id}}</a>
                </template>
            </el-table-column>
           
           <el-table-column label="版本号" width="180">
                <template scope="scope">
                    <span>{{scope.row.cashId}}</span >
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template scope="scope">
                    <el-button type="text" @click='editShow(scope.row,scope.$index)'>修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--弹窗数据-->
        <el-dialog title="修改" v-model="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="序号">
              <el-input v-model="editObj.id" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="版本号">
              <el-input v-model="editObj.version" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="editDo">确 定</el-button>
          </div>
        </el-dialog>
        
        
        
        
        
        data:{
            dialogFormVisible:false,
            editObj:{
                id:'',
                version:''
            }
            list:[
                {
                id:'1'
                    version:'1.0.0'
                },
                {
                id:'2'
                    version:'1.0.1'
                }
            ]
        },
         methods: {
             editShow(row,_index){
                 //记录索引
                 this.listIndex=_index;
                 //记录数据
                 this.editObj=row;
                 //显示弹窗
                 this.dialogFormVisible=true;
             },
             editDo(){
                 let _index=this.listIndex
                 //根据索引，赋值到list制定的数
                 this.list[_index]=editObj;
                 //关闭弹窗
                 this.dialogFormVisible=false;
             }
         }
         
         

这只是本地测试用途，在实际开发应该不会这样做的！实际开发，前后端交互的时候，点击了弹窗的确定修改按钮后，是要对接接口的（一般是传id给接口，根据id来修改数据），接口请求成功了之后，数据修改了，list数据也是要再次请求，更新的。

Answer 2

点击某一行时，你可以通过表格行的作用域插槽获取当前行数据，参见官方示例：自定义列模板

Answer 3

给按钮绑定事件传入两个参数

<el-table-column label="公告内容" align="center">
                        <template scope="scope">
                            <el-button size="small" type="info"         @click="getNoticeInfo(scope.row,scope.$index)">预览</el-button>
                        </template>
 </el-table-column>

scope.row,scope.$index分别是你点击的所在行包含的数据和点击的行在表格中的位置

getNoticeInfo(row, index) {
            // console.log(row,index)
            this.input = row.info
        },

row中包含了表格中该行中所有的数据，将相应的内容赋给弹框中相应的model。这些在element文档中都有说明，没有的可以在给出的官方例子中学习使用。

Answer 4

请问楼主解决这个列表与每行编辑的问题了吗