vue+element-ui:table表格中的slot 、formatter属性
slot 插槽,table中表示该行内容以自定义方式展示
:formatter 方法,用来格式化内容
Function(row, column, cellValue, index)
html
<template-table
ref="multipleTable"
:tableData="tableData"
:config="tableConfig"
:pageConfig="pageConfig"
>
<template slot="avatar" slot-scope="scope">
<img :src="scope.row.avatar" width="40" height="40" />
</template>
<template slot="btns" slot-scope="scope">
<el-button type="text" size="small" @click="batchExamine(scope.row.commentId, 1)">通过</el-button>
<el-button type="text" size="small" @click="batchExamine(scope.row.commentId, 2)">不通过</el-button>
</template>
</template-table>
js
export default {
data () {
return {
tableData: [{
commentId: 1,
avatar: './image.png',
userType: 1
}],
tableConfig: {
size: 'mini',
headerRowClassName: 'table-header',
cells: [
{
prop: 'avatar',
label: '用户头像',
mWidth: 50,
slot: true
},
{
prop: 'userType',
label: '用户身份',
mWidth: 60,
formatter: this.formatUserType
},
{
fixed: 'right',
prop: 'btns',
label: '审核',
mWidth: 80,
slot: true
}
]
},
// 翻页
pageConfig: {
total: 0,
pageNo: 1,
pageSize: 50
}
}
},
methods: {
formatUserType (row) {
let userTypes = new Map([
[1, '学生'],
[2, '老师']
])
return userTypes.get(row.userType)
},
}
vue+element-ui:table表格中的slot 、formatter属性的更多相关文章
- vue + element ui table表格二次封装 常用功能
因为在做后台管理项目的时候用到了大量的表格, 且功能大多相同,因此封装了一些常用的功能, 方便多次复用. 组件封装代码: <template> <el-table :data=&qu ...
- Vue+element ui table 导出到excel
需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...
- Element UI table参数中的selectable的使用
Element UI table参数中的selectable的使用中遇到的坑:页面: <el-table-column :selectable='selectable' type="s ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- 封装Vue Element的table表格组件
上周分享了几篇关于React组件封装方面的博文,这周就来分享几篇关于Vue组件封装方面的博文,也好让大家能更好地了解React和Vue在组件封装方面的区别. 在封装Vue组件时,我依旧会交叉使用函数式 ...
- element UI实现表格中添加开关控制按钮
我使用的是element ui V1.4.3 如下图是我要实现的效果: <template> <div> <el-button type="text" ...
- vue+element ui table组件封装,使用render渲染
后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...
- Vue+element UI实现表格数据导出Excel组件
介绍 这是一个可以将页面中的表格数据导出为Excel文件的功能组件,该组件一般与表格一起使用,将表格数据传给组件,然后通过点击组件按钮可将表格中的数据导出成Excel文件. 使用方法 由于封装该组件内 ...
- vue element UI el-table 表格调整行高的处理方法
这是我在工作项目中遇到的问题,我想将标记处下方的表格高度调低一点,也就是想实现下面的这个效果: 代码调整如下: 说明: 缩小:行高到一定程度之后便不能缩小. 好像最小35px.各位可以试一下. 升高: ...
随机推荐
- TP学习第二天—
一.控制器和对应方法的创建 2.路由解析 传统的路由解析方法: 具体url地址模式设置(配置文件在 ThinkPHP/Conf/convertion.php) 停到了之前的 黑马传智的 TP课,换了个 ...
- PHP留言板制作(MySQL+PHP)
参考视频:https://www.bilibili.com/video/BV1Js411i74j?p=8 环境:phpstudy 2018 PHP 5.X PHPmyadmin ...
- 【Go语言绘图】图片添加文字(二)
这一篇将继续介绍gg库中绘制文字相关的方法,主要包括:DrawStringAnchored().DrawStringWrapped().MeasureMultilineString().WordWra ...
- 【windows】【消息中间件】【安装】Elasticsearch
一.准备工作 elasticsearch的下载地址:https://www.elastic.co/cn/downloads/elasticsearch ik分词器的下载地址:https://githu ...
- 不同程序语言处理加密算法的性能对比(PHP/Golang/NodeJS)
首先上我最常用且最易用的PHP来做下测试 <?php function test_encrypt($fun, $max) { $begin = microtime(TRUE); $pwdpre ...
- 深入理解Spring Security授权机制原理
原创/朱季谦 在Spring Security权限框架里,若要对后端http接口实现权限授权控制,有两种实现方式. 一.一种是基于注解方法级的鉴权,其中,注解方式又有@Secured和@PreAuth ...
- GitLab CI构建SpringBoot-2.3应用
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- MySQL-5.7.29-winx64解压缩版安装
1.下载压缩包 https://dev.mysql.com/downloads/file/?id=491809 2.解压下载的文件(路径放在哪都可以) 3.配置环境变量 添加变量到path中 4.准备 ...
- Mybatis Generator 最完整配置详解
这是从CSDN找到的一篇翻译文章,尝试重新排版后转载. 1. < generatorConfiguration > 标签 1.1 可以用于加载配置项或者配置文件,在整个配置文件中就可以使用 ...
- JavaDailyReports10_08
------------恢复内容开始------------ AWT组件 1.1Frame组件与Panel组件 1.1.1显示框架窗口 1 package awt; 2 3 import java.a ...