vue + element ui table表格二次封装 常用功能
因为在做后台管理项目的时候用到了大量的表格, 且功能大多相同,因此封装了一些常用的功能, 方便多次复用。
组件封装代码:
<template>
<el-table :data="tableData" size="medium"
ref="multipleTable" border fit
@sort-change="handleSort"
@filter-change="filterHandler"
@selection-change="handleSelectionChange">
<!-- 多选框 -->
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column v-for="(th, key) in tableHeader"
min-height="46"
:key="key"
:prop="th.prop"
:label="th.label"
:fixed="th.fixed"
:sortable="th.custom?'custom':false"
:filters="th.filters"
:column-key="th.columnKey"
:filtered-value="th.filteredValue"
:filter-multiple="th.filterMultiple"
:min-width="th.minWidth" align="center">
<template slot-scope="scope">
<!-- 操作按钮 -->
<div v-if="th.operation">
<el-button v-for="(o, key) in th.operation" :key="key"
@click="o.clickFun(scope.row)"
style="width:100%"
type="text" size="mini">
{{o.name}}
</el-button>
</div>
<!-- 点击跳转页面 -->
<div v-else-if="th.router">
<router-link :to="{path: th.router.path, query: {expertFields: scope.row['fieldName']}}">{{scope.row[th.prop]}}</router-link>
</div>
<div v-else>
<!-- 鼠标滑过显示气泡框 -->
<el-popover v-if="th.describe"
popper-class="popover-el-class"
placement="bottom"
width="200"
trigger="hover"
:content="scope.row[th.prop]">
<span class="describe-wrap" slot="reference" style="-webkit-box-orient:vertical">{{ scope.row[th.prop] }}</span>
</el-popover>
<!-- 下拉选择框 -->
<el-select v-else-if="th.selected" :disabled="!th.disabled" v-model="scope.row[th.prop]" @change="th.changeFunc" clearable>
<el-option v-for="(item, index) in th.selected" :value="item.value" :label="item.text" :key="index"></el-option>
</el-select>
<!-- 纯展示数据 -->
<span v-else-if="!th.formatData">{{ scope.row[th.prop] }}</span>
<!-- 需要格式化的数据结构 -->
<span v-else>{{ scope.row[th.prop] | formatters(th.formatData) }}</span>
</div>
</template>
</el-table-column>
</el-table>
</template> <script>
export default {
name: 'comp-table',
props: {
tableData: {
type: Array,
default: function () {
return []
}
},
tableHeader: {
type: Array,
default: function () {
return []
}
},
multipleSelection: {
type: Array,
default: function () {
return []
}
}
},
filters: {
formatters (val, format) {
if (typeof (format) === 'function') {
return format(val)
} else return val
}
},
methods: {
handleSelectionChange (val) {
this.$emit('update:multipleSelection', val)
},
handleSort (sort) {
this.$emit('sort-events', sort)
},
filterHandler (filters) {
this.$emit('filter-events', filters)
}
}
}
</script>
页面内调用:
<comp-table :tableData="tableData"
:tableHeader="tableHeader"
:multipleSelection.sync="multipleSelection"
@filter-events="filterEvents"
@sort-events="sortEvents">
</comp-table> <script>
export default {
data () {
return {
tableData: [], // 请求到的表格数据
tableHeader: [ // 表头信息
{ prop: 'fieldName',
label: '领域',
filters: domainTypeData,
columnKey: 'fieldType',
filterMultiple: false,
minWidth: '150px',
fixed: true
},
{ prop: 'fieidDetails', label: '详情', minWidth: '180px' },
{ prop: 'lawyerQuantity',
label: '关联律师数量',
minWidth: '150px',
router: {path: '/'}
},
{ prop: 'articlesNumber',
label: '相关文章数量',
router: {path: '/case-management'},
minWidth: '150px'
},
{ prop: 'operation',
label: '相关服务',
minWidth: '260px',
style: {display: 'block'},
operation: [
{name: '服务方案一', clickFun: this.getServiceOne},
{name: '服务方案二', clickFun: this.getServiceTwo},
{name: '服务方案三', clickFun: this.getServiceThird}
]
},
{ prop: 'gmtModified', custom: 'custom', label: '最后更新时间', minWidth: '180px', formatData: this.formatDate },
{ prop: 'updater', label: '最后更新人', minWidth: '120px' },
{ prop: 'operation',
label: '操作',
minWidth: '260px',
operation: this.fieldStatus ? [
{name: '上线', disabled: true, clickFun: this.onLineField},
{name: '下线', underline: true, clickFun: this.underField}
] : [
{name: '编辑', clickFun: this.editDomain},
{name: '删除', clickFun: this.delField},
{name: '待审核', clickFun: this.examineField}
]
}
]
}
}
}
</script>
vue + element ui table表格二次封装 常用功能的更多相关文章
- Vue+element ui table 导出到excel
需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- 封装Vue Element的table表格组件
上周分享了几篇关于React组件封装方面的博文,这周就来分享几篇关于Vue组件封装方面的博文,也好让大家能更好地了解React和Vue在组件封装方面的区别. 在封装Vue组件时,我依旧会交叉使用函数式 ...
- vue+element ui table组件封装,使用render渲染
后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...
- Vue+element UI实现表格数据导出Excel组件
介绍 这是一个可以将页面中的表格数据导出为Excel文件的功能组件,该组件一般与表格一起使用,将表格数据传给组件,然后通过点击组件按钮可将表格中的数据导出成Excel文件. 使用方法 由于封装该组件内 ...
- element ui table 表格排序
实现elementui表格的排序 1:给table加上sort-change,给table每一项加上sortable和column-key,排序是根据column-key来进行排序的 <el-t ...
- vue element UI el-table 表格调整行高的处理方法
这是我在工作项目中遇到的问题,我想将标记处下方的表格高度调低一点,也就是想实现下面的这个效果: 代码调整如下: 说明: 缩小:行高到一定程度之后便不能缩小. 好像最小35px.各位可以试一下. 升高: ...
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
随机推荐
- Linux04——手动修改IP和关闭防火墙服务
两种方法手动修改IP: 命令行方式 2. 图形化界面修改 点击应用即可(地址自行设置) 关闭防火墙服务,否则连不上Linux
- LCT 维护边双 / 点双的模板
用 \(\text{LCT}\) 维护边双的做法是:加入一条非树边时,将这段树上路径合并为一个点代表这个边双,具体实现用并查集合并点,在 \(\text{Splay}\) 与 \(\text{Acce ...
- js下false情况
//为false的情况 false null NaN undefined "" 0
- HITCON-Training-master 部分 Writeup(1月30更新)
0x01.lab3 首先checksec一下,发现连NX保护都没开,结合题目提示ret2sc,确定可以使用shellcode得到权限. IDA查看伪代码 大致分析: 将shellcode写入name数 ...
- Spring 事务管理的使用
Spring提供了2种事务管理 编程式的 声明式的(重点):包括xml方式.注解方式(推荐) 基于转账的demo dao层 新建包com.chy.dao,包下新建接口AccountDao.实现类Acc ...
- linux的数据盘挂载
图文教程: Linux的云服务器数据盘未做分区和格式化,可以根据以下步骤进行分区以及格式化操作. 一:登陆 用Linux 的SSH 登陆软件(xshell 或者putty) 登陆阿里云主机服务器. 二 ...
- Many Formulas
You are given a string S consisting of digits between 1 and 9, inclusive. You can insert the letter ...
- Cisco Umbrella WLAN
Cisco Umbrella WLAN在域名系统(DNS)级别提供云交付网络安全服务,可自动检测已知和紧急威胁. 此功能允许您在实际恶意攻击之前阻止托管恶意软件,僵尸网络和网络钓鱼的站点. Cisco ...
- js一位大侠的笔记--转载
js基础 js笔记散记,只是为了方便自己以后可以回看用的: 1.所有用 “点” 的都能 “[]” 代替 odiv.style.color odiv['style'].color odiv['style ...
- Notepad++查看文本文件的总的字符数、GBK字节数、UTF8字节数
如果其编码是 小结:UTF-8编码下,一个汉字占3字节,GBK编码下,一个汉字占2字节: