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

回答:

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

回答:

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

<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文档中都有说明,没有的可以在给出的官方例子中学习使用。

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注