因为在做后台管理项目的时候用到了大量的表格, 且功能大多相同,因此封装了一些常用的功能, 方便多次复用。

组件封装代码:

<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表格二次封装 常用功能的更多相关文章

  1. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  2. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  3. 封装Vue Element的table表格组件

    上周分享了几篇关于React组件封装方面的博文,这周就来分享几篇关于Vue组件封装方面的博文,也好让大家能更好地了解React和Vue在组件封装方面的区别. 在封装Vue组件时,我依旧会交叉使用函数式 ...

  4. vue+element ui table组件封装,使用render渲染

    后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...

  5. Vue+element UI实现表格数据导出Excel组件

    介绍 这是一个可以将页面中的表格数据导出为Excel文件的功能组件,该组件一般与表格一起使用,将表格数据传给组件,然后通过点击组件按钮可将表格中的数据导出成Excel文件. 使用方法 由于封装该组件内 ...

  6. element ui table 表格排序

    实现elementui表格的排序 1:给table加上sort-change,给table每一项加上sortable和column-key,排序是根据column-key来进行排序的 <el-t ...

  7. vue element UI el-table 表格调整行高的处理方法

    这是我在工作项目中遇到的问题,我想将标记处下方的表格高度调低一点,也就是想实现下面的这个效果: 代码调整如下: 说明: 缩小:行高到一定程度之后便不能缩小. 好像最小35px.各位可以试一下. 升高: ...

  8. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  9. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

随机推荐

  1. Linux04——手动修改IP和关闭防火墙服务

    两种方法手动修改IP: 命令行方式 2. 图形化界面修改 点击应用即可(地址自行设置) 关闭防火墙服务,否则连不上Linux

  2. LCT 维护边双 / 点双的模板

    用 \(\text{LCT}\) 维护边双的做法是:加入一条非树边时,将这段树上路径合并为一个点代表这个边双,具体实现用并查集合并点,在 \(\text{Splay}\) 与 \(\text{Acce ...

  3. js下false情况

    //为false的情况 false null NaN undefined "" 0

  4. HITCON-Training-master 部分 Writeup(1月30更新)

    0x01.lab3 首先checksec一下,发现连NX保护都没开,结合题目提示ret2sc,确定可以使用shellcode得到权限. IDA查看伪代码 大致分析: 将shellcode写入name数 ...

  5. Spring 事务管理的使用

    Spring提供了2种事务管理 编程式的 声明式的(重点):包括xml方式.注解方式(推荐) 基于转账的demo dao层 新建包com.chy.dao,包下新建接口AccountDao.实现类Acc ...

  6. linux的数据盘挂载

    图文教程: Linux的云服务器数据盘未做分区和格式化,可以根据以下步骤进行分区以及格式化操作. 一:登陆 用Linux 的SSH 登陆软件(xshell 或者putty) 登陆阿里云主机服务器. 二 ...

  7. Many Formulas

    You are given a string S consisting of digits between 1 and 9, inclusive. You can insert the letter ...

  8. Cisco Umbrella WLAN

    Cisco Umbrella WLAN在域名系统(DNS)级别提供云交付网络安全服务,可自动检测已知和紧急威胁. 此功能允许您在实际恶意攻击之前阻止托管恶意软件,僵尸网络和网络钓鱼的站点. Cisco ...

  9. js一位大侠的笔记--转载

    js基础 js笔记散记,只是为了方便自己以后可以回看用的: 1.所有用 “点” 的都能 “[]” 代替 odiv.style.color odiv['style'].color odiv['style ...

  10. Notepad++查看文本文件的总的字符数、GBK字节数、UTF8字节数

    如果其编码是 小结:UTF-8编码下,一个汉字占3字节,GBK编码下,一个汉字占2字节: