Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）

能够解决的问题

需要在表格中添加一个类似修改或编辑的按钮，按下按钮，弹出的窗口需要本行的渲染数据
需要向服务端提交一串含有本行内容文本的操作

效果

代码总览

<template><div id="app"><el-table:data="studentsNewList"style="width:95%"><el-table-columnprop="id"label="ID"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="sex"label="性别"width="180"></el-table-column><el-table-columnprop="ctime"label="创建时间"></el-table-column><el-table-columnlabel="操作"><template slot-scope="scope"><el-button  @click.native.prevent="getrows(scope.row)" type="warning" round>修改数据</el-button></template></el-table-column></el-table></div>
</template><script>export default {name: "demo1",data(){return{studentsNewList : [{id:1,name:'余强',sex:'男',ctime:2012},{id:2,name:'萧芳',sex:'女',ctime:2012},{id:3,name:'康敏',sex:'女',ctime:2012},{id:4,name:'吕丽',sex:'女',ctime:2012}],}},methods:{getrows(row){console.log(row.id)console.log(row.name)console.log(row.sex)}}}
</script><style scoped>
</style>

关键点

<el-table-column label="操作"><template slot-scope="scope"><el-button  @click.native.prevent="getrows(scope.row)" type="warning" round>修改数据</el-button></template>
</el-table-column>

这里的按钮用 template标签包起来，设置好 slot-scope属性，给要调用事件的按钮绑定点击事件

methods:{    // 这里直接将事件传入的参数当做对象，以原数组的属性名来调用数据getrows(row){console.log(row.id)console.log(row.name)console.log(row.sex)}
}

在事件中以对象的方式去调用数据

studentsNewList : [          // 传入用于渲染表格的数组的数据格式{id:1,name:'余强',sex:'男',ctime:2012},{id:2,name:'萧芳',sex:'女',ctime:2012},{id:3,name:'康敏',sex:'女',ctime:2012},{id:4,name:'吕丽',sex:'女',ctime:2012}
]

Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）相关推荐

element走马灯自动_[转]vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...
vue element ui表格下载成xlsx工作表格
我们需要两个依赖打开项目终端输入 npm i file-saver -S 和 npm i xlsx -S 在需要使用的组件中引入依赖 import FileSaver from 'file-sav ...
vue element ui 子组件向父组件传值
写项目碰到弹窗(子组件)向他的父组件传值,具体如下: 父组件: <Zjhinfo v-if="ZjhinfoVisible" ref="Zjhinfo" ...
VUE Element UI 父组件调用子组件方法变量，子组件使用父组件变量
一.父组件调用子组件的方法步骤拆解: (1)父组件:1.渲染调用子组件 2.导入子组件 3.声明子组件变量 4.调用子组件 (2)子组件:1.实现子组件自己的渲染.数据处理功能 2.使用父组件的变量 ...
Vue + Element UI 表格分页记忆选中，分页切换页面打勾不丢失
方法一: 官方也有基于这种操作给出通过属性解决的方法: <el-table :row-key="rowKey"><el-table-column type=&qu ...
Vue + Element UI 表格分页记忆选中
官方基于这种操作给出通过属性解决的方法: :row-key:行数据的 Key ,用来优化 Table 的渲染:在使用 reserve-selection 功能与显示树形数据时,该属性是必填的.类型为 ...
Vue+Element UI表格列的显示和隐藏
如下代码: <template><div><el-table:data="tabledate"height="400">// ...
Vue+element ui 表格中时间选择器范围控制(两种方式)
1.页面 <el-table v-loading="loading" :data="tableList" border> <!-- 方法1 - ...
实战 | Element UI 父子组件传值与事件绑定（逆向）
这是小小本周的第四篇,本篇将会倒过来讲解Element UI 父子组件传值与事件绑定. 父子组件传值新建父组件和子组件新建父组件代码如下 <template><div id=& ...

Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）

Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）

能够解决的问题

效果

代码总览

关键点

Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）相关推荐

最新文章

热门文章

Vue Element UI 表格组件 利用插槽实现按下按钮后获得本行数据（内容）

Vue Element UI 表格组件 利用插槽实现按下按钮后获得本行数据（内容）

能够解决的问题

效果

代码总览

关键点

Vue Element UI 表格组件 利用插槽实现按下按钮后获得本行数据（内容）相关推荐

最新文章

热门文章

Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）

Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）

Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）相关推荐