ElementUI表格中获取当前行数据（实现对table数据的修改和删除）

在此之前，已经实现了vue+ElementUI的跨域查询并渲染查询结果的功能，现在想要在每一行中添加修改和删除的按钮。于是乎就需要获取当前行的数据，于是就有了下面两种方式的获取。


1 获取当前行的数据
1.1 我的笨办法
这里是我记录自己的学习过程，这个方法也能实现，但是麻烦，如果您只是为了寻找最终方案，请直接查看1.2章节。
首先我查看了官方文档，打算使用对话框来渲染修改页面和删除警告页面。这个实现起来很简单，就是对按钮绑定一个click事件，然后控制对话框的显示和隐藏：


<el-table @row-click="handleEdit" :data="dengmiQueryForm.list" stripe border width="100%" height="350">
<el-table-column prop="mimian" label="谜面" width="300" fixed="left">
</el-table-column>
<el-table-column prop="dengmiSeq" label="序号">
</el-table-column>
<el-table-column prop="mimu" label="谜目">
</el-table-column>
<el-table-column prop="mige" label="谜格">
</el-table-column>
<el-table-column prop="midi" label="谜底">
</el-table-column>
<el-table-column prop="zuozhe" label="作者">
</el-table-column>
<el-table-column prop="mizhu" label="注">
</el-table-column>
<el-table-column prop="shangxi" label="赏析">
</el-table-column>
<el-table-column prop="leixing" label="类型">
</el-table-column>
<el-table-column label="操作" fixed="right" width="200px">
<el-col :span="10">
<el-tooltip effect="dark" content="编辑当前行" placement="top">
<el-button size="mini" @click="dengmiQueryForm.dialogVisible = true">编辑</el-button>
</el-tooltip>
</el-col>
</el-table-column>
</el-table>
<div style="margin-top: 5px;"></div><!--这个只是为了在页面上显示间隔-->
<el-dialog title="编辑灯谜" :visible.sync="dengmiQueryForm.dialogVisible">
<el-form :model="modifyForm">
<el-form-item label="谜面" :label-width="modifyForm.formLabelWidth">
<el-input v-model="modifyForm.mimian" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="谜目" :label-width="modifyForm.formLabelWidth">
<el-input v-model="modifyForm.mimu" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dengmiQueryForm.dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dengmiQueryForm.dialogVisible = false">确 定</el-button>
</div>
</el-dialog>


<script>
export default {
name: "dengmiQuery",
comments: {
DengmiModify
},
data() {
return {
modifyForm:{
formLabelWidth:'120px',
mimian:'',
mimu:''
},
dengmiQueryForm: {
dialogDeleteVisible:false,
dialogVisible: false,
list: []
}
};
},
methods: {
submitForm(formName) {
console.log(formName.mimu);
this.$http.get('http://localhost:909/dengmi/showDengmi2').then(function (success) {
console.log("This request is succeed! Here is the response:");
this.dengmiQueryForm.list = success.body.result;
this.dengmiQueryForm.requestResult = true;
}, function (error) {
console.log("This request is failed! Here is the response:");
console.log(error);
this.dengmiQueryForm.requestResult = false;
})
},
handleEdit(row) {
this.dengmiQueryForm.deleteShow = row.mimian + "(" + row.mimu + ")" + row.midi + "/" + row.zuozhe;
this.modifyForm.mimian=row.mimian;
this.modifyForm.mimu=row.mimu;
}
}
}
</script>


如上代码，是在el-table标签上绑定了行单击事件*@row-click=“handleEdit”*，该方法的参数row即为当前行的数据。
在handleEdit方法中，通过对data中的参数赋值，然后新增窗口中通过使用data中的参数来获取当前行的数据，从而实现将当前行的数据传递到新的对话框中。


这个方法虽然也能实现需求，但是比较麻烦：当有别的操作的时候，比如我再添加一个删除操作，就需要在点击删除按钮的时候，获取当前行的数据，然后进行删除操作；而因为新增和删除使用的是不同的对话框，其取值也是要通过handleEdit方法来获取，因此，当按钮较多，或者当前行的字段值较多的时候，就需要在handleEdit中对许多许多的变量进行赋值，而且是对所有按钮的所有参数。这个工作量想想还是挺恐怖的。


1.2 使用slot-scope获取数据
slot-scope是属于VUE的东东，叫做插槽；至于插槽是个什么东东，来戳这里。
在操作列，对操作按钮先用带有slot-scope属性的dom进行包装，即可获取当前行的数据，具体的代码，除了操作列不同外，还需要删除el-table标签中绑定的*@row-click*方法，剩下的都一样：


<el-table-column label="操作尝试2">
<template slot-scope="scope">
<el-button type="text" @click="checkDetail(scope.row)">查看详情</el-button>
</template>
</el-table-column>
<script>
export default {
       name: "dengmiQuery",
       data() {
           return {
               modifyForm:{
                   formLabelWidth:'120px',
                   mimian:'',
                   mimu:''
               },
               dengmiQueryForm: {
                   dialogVisible: false,
                   list: [],
               }
           };
       },
       methods: {
           checkDetail(val){
               console.log(val)
           }


       }
   }
  </script>


通过<template slot-scope=“scope”>来定义当前行的数据对象，然后通过scope.row来获取当前行的数据。


全部代码
<template>
   <div>
       <el-form :model="dengmiQueryForm" ref="dengmiQueryForm" label-width="100px" class="demo-ruleForm" size="mini">
           <el-row>
               <el-col span="8">
                   <el-form-item label="谜面">
                       <el-input v-model="dengmiQueryForm.mimian"></el-input>
                   </el-form-item>
               </el-col>
               <el-col span="8">
                   <el-form-item label="谜目">
                       <el-input v-model="dengmiQueryForm.mimu"></el-input>
                   </el-form-item>
               </el-col>
               <el-col span="8">
                   <el-form-item label="谜格">
                       <el-input v-model="dengmiQueryForm.mige"></el-input>
                   </el-form-item>
               </el-col>
           </el-row>
           <el-row>
               <el-col span="8">
                   <el-form-item label="谜底">
                       <el-input v-model="dengmiQueryForm.midi"></el-input>
                   </el-form-item>
               </el-col>
               <el-col span="8">
                   <el-form-item label="作者">
                       <el-input v-model="dengmiQueryForm.zuozhe"></el-input>
                   </el-form-item>
               </el-col>
               <el-col span="8">
                   <el-form-item label="谜底字数">
                       <el-input v-model="dengmiQueryForm.midiLength"></el-input>
                   </el-form-item>
               </el-col>
           </el-row>
           <el-row>
               <el-col>
                   <el-button type="primary" @click="submitForm" icon="el-icon-search">查询</el-button>
                   <el-button type="warning" @click="resetForm" icon="el-icon-search" plain>重置</el-button>
               </el-col>
           </el-row>
       </el-form>
       <el-header></el-header>
       <div v-if="dengmiQueryForm.requestResult">
           <el-table :data="dengmiQueryForm.list.slice((dengmiQueryForm.currentPage-1)*dengmiQueryForm.pagesize,dengmiQueryForm.currentPage*dengmiQueryForm.pagesize)"
                     stripe border width="100%" height="350">
               <el-table-column type="index" fixed="left"></el-table-column>
               <el-table-column prop="mimian" label="谜面" width="300" fixed="left">
               </el-table-column>
               <el-table-column prop="dengmiSeq" label="序号">
               </el-table-column>
               <el-table-column prop="mimu" label="谜目">
               </el-table-column>
               <el-table-column prop="mige" label="谜格">
               </el-table-column>
               <el-table-column prop="midi" label="谜底">
               </el-table-column>
               <el-table-column prop="zuozhe" label="作者">
               </el-table-column>
               <el-table-column prop="mizhu" label="注">
               </el-table-column>
               <el-table-column prop="shangxi" label="赏析">
               </el-table-column>
               <el-table-column prop="leixing" label="类型">
               </el-table-column>
               <el-table-column label="操作" fixed="right" width="200px">
                   <el-row>
                       <el-col :span="10">
                           <el-tooltip effect="dark" content="编辑当前行" placement="top">
                               <el-button size="mini" @click="dengmiQueryForm.dialogVisible = true">编辑</el-button>
                           </el-tooltip>
                       </el-col>
                       <el-col :span="10">
                           <el-tooltip effect="light" content="删除当前行" placement="top">
                               <el-button size="mini" @click="dengmiQueryForm.dialogDeleteVisible = true" type="danger" plain>删除</el-button>
                           </el-tooltip>
                       </el-col>
                   </el-row>
               </el-table-column>
               <el-table-column label="操作尝试2">
                   <template slot-scope="scope">
                       <el-button type="text" @click="checkDetail(scope.row)">查看详情</el-button>
                   </template>
               </el-table-column>
           </el-table>
           <div style="margin-top: 5px;"></div>
           <el-pagination
                   prev-text="上一页"
                   next-text="下一页"
                   background
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="dengmiQueryForm.currentPageA"
                   :page-sizes="[5,10,50,100]"
                   :page-size="5"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="dengmiQueryForm.list.length">
           </el-pagination>
       </div>
       <div v-else>
           请求失败！
       </div>
       <el-dialog title="编辑灯谜" :visible.sync="dengmiQueryForm.dialogVisible">
           <el-form :model="modifyForm">
               <el-form-item label="谜面" :label-width="modifyForm.formLabelWidth">
                   <el-input v-model="modifyForm.mimian" auto-complete="off"></el-input>
               </el-form-item>
               <el-form-item label="谜目" :label-width="modifyForm.formLabelWidth">
                   <el-input v-model="modifyForm.mimu" auto-complete="off"></el-input>
               </el-form-item>
           </el-form>
           <div slot="footer" class="dialog-footer">
               <el-button @click="dengmiQueryForm.dialogVisible = false">取 消</el-button>
               <el-button type="primary" @click="dengmiQueryForm.dialogVisible = false">确 定</el-button>
           </div>
       </el-dialog>
       <el-dialog title="删除灯谜" :visible.sync="dengmiQueryForm.dialogDeleteVisible">
           <h1><span style="color: red"><strong>确定删除该行数据？删除后不可恢复！</strong></span></h1>
           <el-form>
               <el-form-item label="当前行数据">
                   <el-col :span="18">
                       <el-input v-model="dengmiQueryForm.deleteShow" readonly></el-input>
                   </el-col>
               </el-form-item>
           </el-form>
           <div slot="footer" class="dialog-footer">
               <el-button @click="dengmiQueryForm.dialogDeleteVisible = false">取 消</el-button>
               <el-button type="primary" @click="dengmiQueryForm.dialogDeleteVisible = false">确 定</el-button>
           </div>
       </el-dialog>
   </div>
</template>
<script>
   export default {
       name: "dengmiQuery",
       data() {
           return {
               modifyForm:{
                   formLabelWidth:'120px',
                   mimian:'',
                   mimu:''
               },
               dengmiQueryForm: {
                   deleteShow:'',
                   dialogDeleteVisible:false,
                   dialogVisible: false,
                   currentRow: null,
                   visibleA: false,
                   currentPage: 1, //初始页
                   pagesize: 5,    //    每页的数据
                   currentPageA: 1,
                   mimian: '',
                   mimu: '',
                   mige: '',
                   midi: '',
                   zuozhe: '',
                   midiLength: '',
                   list: [],
                   requestResult: true,
                   thisRowData:{}
               }
           };
       },
       methods: {
           submitForm(formName) {
               console.log(formName.mimu);
               this.$http.get('http://localhost:909/dengmi/showDengmi2').then(function (success) {
                   console.log("This request is succeed! Here is the response:");
                   this.dengmiQueryForm.list = success.body.result;
                   this.dengmiQueryForm.requestResult = true;
               }, function (error) {
                   console.log("This request is failed! Here is the response:");
                   console.log(error);
                   this.dengmiQueryForm.requestResult = false;
               })
           },
           resetForm(formName) {
               this.$refs[formName].resetFields();
           },
           handleSizeChange(size) {
               this.dengmiQueryForm.pagesize = size;
               console.log(this.dengmiQueryForm.pagesize)  //每页下拉显示数据
           },
           handleCurrentChange(currentPage) {
               this.dengmiQueryForm.currentPage = currentPage;
               console.log(this.dengmiQueryForm.currentPage)  //点击第几页
           },
           handleEdit(row) {
               this.dengmiQueryForm.deleteShow = row.mimian + "(" + row.mimu + ")" + row.midi + "/" + row.zuozhe;
               // this.dengmiQueryForm.currentRow = row;
               console.log(this.dengmiQueryForm.deleteShow);
               this.modifyForm.mimian=row.mimian;
               this.modifyForm.mimu=row.mimu;


               // console.log("event=" + event);
               // console.log(colunm)
           },
           handleClose(done) {
               this.$confirm('确认关闭？')
                   .then(_ => {
                       done();
                   })
                   .catch(_ => {});
           },
           checkDetail(val){
               console.log(val)
           }


       }
   }
</script>
<style scoped>
</style>

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
标签:    ElementUI表格中获取当前行数据（实现对table数据的修改和删除）




阅读全文