ElementUI表格中获取当前行数据(实现对table数据的修改和删除) - 蓝蓝设计_UI设计公司

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


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

2019-5-23 释然 前端及开发文章及欣赏


如果您想订阅本博客内容,每天自动发到

前言

在此之前,已经实现了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.thriveonsite.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务
标签: ElementUI表格中获取当前行数据(实现对table数据的修改和删除) « 官方出品!揭秘阿里巴巴APP 8.0 视觉品牌升级背后的设计思路 | QQ20周年展 | 策划与设计执行»


订阅Rss
秒速赛车官网 秒速赛车官网 贵州快3 秒速赛车官网 秒速赛车官网 香港开奖结果2019+开奖记录表 秒速赛车官网 秒速赛车官网 江苏快3平台 秒速赛车官网