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.各位可以试一下. 升高: ...
随机推荐
- pytest接口测试轻松入门
通过Postman请求结果如下图: 那我们怎么用pytest进行测试呢? 在接口测试,我们要用到requests包,实现代码如下: import pytest import allure import ...
- [BUUCTF] MISC-九连环
0x01 知识点 伪加密 steghide提取信息 0x02 伪加密的判断 首先,在winhex分析,发现有4个zip文件的文件头和2个文件尾,有完整文件头尾那么可以直接修改后缀为zip解压, 查看一 ...
- Kafka超详细学习笔记【概念理解,安装配置】
目录 本篇要点 Kafka介绍 作为流处理平台的三种特性 主要应用 四个核心API 基本术语 快速开始 安装配置Zookeeper 下载kafka 配置文件 Windows的命令 启动Zookeepe ...
- Unity UI适配 之 GridLayoutGroup组件下的内容适配(进度条适配)
好久没有更新博客了,蓝廋啊. 今天写一写关于GripLayoutGroup组件的屏幕适配问题,以在ARPG游戏中常用的经验条适配来举例子,以此来加深自己的记忆,以便在下次需要制作该功能时能够快速完成. ...
- 远程调用get和post请求 将返回结果转换成实体类
package org.springblade.desk.utils; import org.apache.http.client.ResponseHandler; import org.apache ...
- 【目标检测】基于传统算法的目标检测方法总结概述 Viola-Jones | HOG+SVM | DPM | NMS
"目标检测"是当前计算机视觉和机器学习领域的研究热点.从Viola-Jones Detector.DPM等冷兵器时代的智慧到当今RCNN.YOLO等深度学习土壤孕育下的GPU暴力美 ...
- 使用mybatis执行对应的SQL Mapper配置中的insert、update、delete等标签操作,数据库记录不变
我使用springMVC集成mybatis,执行SQLMapper配置文件里的insert操作,发现程序没有报错,但数据库表里却没有刚才插入的记录.查了很多资料,终于在一篇博客上找到了答案:在执行完方 ...
- eclipse中安装jetty插件并使用
一.eclipse中jetty插件安装: 打开eclipse,依次点击菜单Help->Eclipse Marketplace,在Find后面的框中输入jetty,选择第一项进行install即可 ...
- docker获取Let's Encrypt永久免费SSL证书
一 起因 官方的cerbot太烦了,不建议使用 还不如野蛮生长的acme.sh,而这里介绍docker运行cerbot获取Let's Encrypt永久免费SSL证书 二 选型 cerbot的证书不会 ...
- PHPer 面试
A:怎么保证促销商品不会超卖? 答:这个问题是我们当时开发时遇到的一个难点,超卖的原因主要是下的订单的数目和我们要促销的商品的数目不一致导致的,每次总是订单的数比我们的促销商品的数目要多,当时我们的小 ...