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

问题描述

问 题

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

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

解决方案

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

        <!--表格-->
        <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数据也是要再次请求，更新的。

这篇关于vue.js - element-ui 中的dialog弹出的 输入框 如何获取表格值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！