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

最新推荐文章于 2024-03-15 15:57:54 发布
最新推荐文章于 2024-03-15 15:57:54 发布
阅读量7.8w 收藏 153
点赞数 34
分类专栏： vue ElementUI 前端 文章标签： VUE ELEMENTUI 前端 获取当前行数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33616027/article/details/90411872
版权
ElementUI 同时被 3 个专栏收录
9 篇文章 1 订阅
订阅专栏
前端
9 篇文章 0 订阅
订阅专栏
vue
8 篇文章 0 订阅
订阅专栏

前言

在此之前，已经实现了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>
HowYouth
关注
  • 34
    点赞
  • 踩
  • 153
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
01-19
layui table利用参数新增,修改,删除,查询,双击数据行获取本行数据等。模块化使用layui table表格，通过二次封装实现语法上的解耦使用layui table，使用参数就可以以及外部的方法调用即可实现对layui table表格的操作，通过封装，把更多自主权交给页面自定义,layui:v:2.3.0。感谢layui的作者贤心。 演示效果如下： 以上json显示不完整是录屏的原因，请见谅！ var Table = function(ops){ this.dataList = []; this.table = {}; this.tid = ops.id; } Tabl
vue elementUI table表格数据 滚动懒加载的实现方法
01-19
在项目中遇到了一个性能问题 vue+elementUI table表格展示数据，当数据很多的时候，不能一页显示完，同时一次请求数据量太大，会增加网页渲染的时间，影响体验， 这个时候常常有两种方法处理， 1、分页，如下   2、如果我不想分页，又想在一页显示全部数据呢？这个时候其实就可以用数据懒加载了 如下一开始表格只显示31行数据 当将滚动条拉到低的时候，就会再加载31条数据，如果剩下的数据不足31，那就加载剩下的   根据项目需求，这需要一页可以看到全部数据，所以我选择了第二中方式 那么第二种方式要怎么去实现呢？ 在了解它的原理前，你需要分清楚三个属性： scrollHeight：指元素
Vue3——element-plus表格组件怎样得到当前行的id
Z_B_L的博客
01-05 966
可以获取一行的内容，如果要获取行内的某一个字段的值，只需要再点出它的字段名，在我的代码里，就是。，而我使用的是 Vue 3，所以网上搜到的很多使用 slot-scope 的方法都失效了。指令，这个指令中是 Vue 2.6 新增的，取代了以前的 slot 和。剩下的就是直接在点击事件中获取参数使用即可。符号是必不可少的，否则将不起作用。如果要获取行的索引，使用。
el-table按钮获取当前行元素
最新发布
秋书一叶的博客
03-15 617
使用了作用域插槽（scoped slot），通过 slot-scope=“scope” 来声明作用域，然后在插槽内容中可以使用 scope 对象来获取当前行的数据对象。
Element中的el-table中如何获取每一行的id
karlaofsky的博客
01-22 1099
的方式获取每一行的id。scope.row.列名，的方式获取当前行对应列的值。
关于Element-ui:el-table获取当前列数据
m0_62272060的博客
12-14 816
只需要再每一行数据外面包一层并指定slot-scope即可，然后再里面就可以用scope.row.属性名来获取当前行的的数据。
vue（el-table-column） 点击某一行的按钮，获取当前行的数据
CFL的博客
09-07 4248
【代码】vue（el-table-column） 点击某一行的按钮，获取当前行的数据。
vue elementui项目 el-table勾选复选框获取列表当前行数据 el-table收集列表中被选中复选框数据信息
暂时还没想好博客简介
11-30 1万+
el-table勾选复选框如何获取列表当前行id，如何勾选获取表格当前行的index,name，如何勾选获取表格当前行的数据，VUE获取element组件中table表格的id,element中table单元格获取id，elementUI表格如何获取当前选择的id?【ElementUI】获取表格选中行的id数组element中获取选中行元素的IDel-table收集列表中被选中复选框数据信息
elementUI如何获取table 表格中的数据行数据和每一行的id
weixin_42248417的博客
02-22 7995
elementUI如何获取table 表格中的数据行数据和每一行的id
记录一下Vue + element 获取表格选中行的数据
m0_46680540的博客
11-05 2308
Element表格需要使用可以多选的表格，需要绑定一个事件，@selection-change="selsChange" 在vue的script区的methods中写这个方法： selsChange: function (sels) { this.sels = sels; }, 这个方法的意思是将选中的行的数据赋值给sels，选中的数据是对象，而在实际业务中，比如说批量删除，需要的是选中的数据中的id //批量删除 batchRemove: function () {
vue elementui表格获取某行数据（slot-scope和selection-change方法使用）
热门推荐
m0_58565372的博客
06-09 2万+
2.但如果要实现的功能是在表头上了，例如图里的批量审核，那要怎么获取当前前勾选的这一行的数据呢？1.当写后台管理页面时，使用element ui里的table表格时，表格中有操作按钮，获取当前行的数据时，我们可以使用 slot-scope="scope"来获取。注意：this.multipleSelection.length 为选择了多少项。拿当前选中的行的数据，进行传值，实现批量审核功能。打印可得当前行数据，你就可以处理这些数据了。打印可得当前行数据，你就可以处理这些数据了。
Layui数据表格之获取表格中所有的数据方法
12-07
数据表格中的数据是通过直接赋值的方式。这里实际上思想是反过来的，将拿数据表格中的所有数据，转换为Layui数据表格拿原始数据去渲染数据表格。 1、创建一个作用域合适的JS对象数组用来保存数据表格中的原始数据。 2、将上一步创建的JS对象数组也就是原始数据赋给table.render()的data参数。 3、获取表格中的所有数据其实直接获取第一步中创建的JS对象数组即可，参照下面的代码，获取表格中的所有数据就是获取tableContent中的数据。 // 存放数据表格中的数据的对象数组tableContent var tableContent = new Array(); table.rend
Vue+ElementUI table实现表格分页
12-13
Vue+ElementUI table表格分页，供大家参考，具体内容如下 分页的两种方式。前端分页，后端分页。两种方式各有个的优缺点吧。 前端分页：后台只需将数据返回，不需要做过多处理，前端一次请求拿到所有数据后做分页处理。但数据量不能太大，因为前端是先一次性加载所有数据，然后在做分页处理。在数据量多的情况下，加载相对应的会变慢。所有在前端做分页时要先考虑一下后期的数据量。 后端分页：因为是后端分页，前端在每点击一次分页时，便向后台请求一次数据。其实就是避免前端一次性从数据库获取大量数据 一、在elementUI中将表格、分页引入自己的页面中 <div class="
vue实现在表格里,取每行的id的方法
08-27
下面小编就为大家分享一篇vue实现在表格里,取每行的id的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。 查看实例 教程 此指令依赖于 el[email protected]，使用前请熟悉： el[email protected] el[email protected] 安装 npm install --save el-table-infinite-scroll 全局引入 import Vue from 'vue'; import elTableInfiniteScroll from 'el-table-infinite-scroll'; Vue.use(elTableInfiniteScroll); 局部引入 [removed] import elTableInfiniteScroll from 'el-table-infinite-scroll'; export default { directi
Layui组件Table绑定行点击事件和获取行数据的方法
10-18
今天小编就为大家分享一篇Layui组件Table绑定行点击事件和获取行数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE+Element学习笔记（一）VUE+ElementUI实现登录功能
HowYouth的博客
05-31 1万+
VUE+ElementUI的登录页面
elementui表格怎么获取当前勾选行
05-26
要获取 ElementUI 表格中当前勾选行，可以通过以下步骤实现： 1. 在表格中添加 `selection-change` 事件监听器，如下所示： ```html <el-table @selection-change="handleSelectionChange"> ``` 2. 在 Vue 实例中定义 `handleSelectionChange` 方法，该方法接收一个参数 `selection`，它是当前勾选的行的数组。可以在该方法中保存 `selection` 数组到 Vue 实例的 data 属性中，如下所示： ```js data() { return { selectedRows: [] // 保存勾选的行 } }, methods: { handleSelectionChange(selection) { this.selectedRows = selection } } ``` 3. 然后可以在其他方法中访问 `selectedRows` 属性获取当前勾选的行，如下所示： ```js methods: { handleDelete() { const ids = this.selectedRows.map(row => row.id) // 发送删除请求并更新表格 } } ``` 这样就可以在 ElementUI 表格中获取当前勾选的行了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值