技术栈：vue2.0 +js +webpack
需求：封装数据渲染的动态表格组件
1.实现字典表的转译
2.排序号的自动编译
3.自定义字段
4.操作栏的自定义
封装组件代码：
<template><el-tablev-loading.fullscreen.lock="loading"ref="multipleTable":data="list"v-bind="$attrs":header-cell-style="{ background: '#eceef4' }"@sort-change="sortChange":border="true":stripe="true"class="eltabbox":height="'100%'":row-class-name="tableRowClassName"element-loading-background="rgba(0, 0, 0, 0.4)"element-loading-text="Loading"><template slot="empty"><EmptyData /></template><el-table-column:key="Math.random()"v-if="showIndex"width="80":align="'center'"label="排序号"fixed="left"><template slot-scope="scope"><span class="column-index">{{ scope.row.tempIndex + 1 }}</span></template></el-table-column><el-table-columnv-for="column in normalColumns":key="Math.random()":prop="column.prop":label="column.label":align="column.align":width="column.width":sortable="sortFun(column.prop)":sort-orders="['descending', 'ascending', null]"><template #default="scope"><!-- 自定义字段--><template v-if="column.html"><div v-html="column.html(scope.row, column)"></div></template><!--字典转换---><template v-else-if="column.dictionary"><span>{{ changeDict(column.dictionary, scope.row[column.prop]) }}</span></template><span v-else>{{ scope.row[column.prop] }}</span></template></el-table-column><el-table-column label="操作" v-if="showAction" :key="Math.random()"><template #default="scope"><slot v-bind="scope" name="actionSlot"></slot></template></el-table-column></el-table></template><script>//表格的整体高度为100% 需要在最外一层进行高度的给定import EmptyData from "@/components/EmptyData";export default {name: "BaseTable",components: {EmptyData},props: {// 数据列表list: {type: Array,default: () => []},// 需要展示的列 === prop：列数据对应的属性，label：列名，align：对齐方式，width：列宽columns: {type: Array,default: () => []},sortList: {// 需要开启排序的列type: Array,default: () => {return [];}},showAction: {type: Boolean,default: false},showIndex: {//是否显示排序号type: Boolean,default: false},//加载loading: {type: Boolean,default: false}},data() {return {normalColumns: this.columns.filter(item => !item.type),sortType: {ascending: "asc",descending: "desc"}};},methods: {sortChange(column) {let order = sortType[column.order];const sortParam = order? { sort_key: column.prop, sort_order: order }: {};console.log("---sortParam----", sortParam);this.$emit("sortChange", sortParam);},sortFun(val) {const temp = this.sortList.find(item => {return item === val;});return temp ? "custom" : false;},//字典转译changeDict(arr, val) {const list = arr.find(item => item.code === val);return list.name || "-";},tableRowClassName(row, index) {// 给每条数据添加一个索引row.row.tempIndex = row.rowIndex;}}};</script>
组件的使用：
<template><div class="base-table">自定义表格的封装 + 页签组件 + 操作栏<BaseTable :columns="columns" :list="tableData" :showAction="true"><template #actionSlot="scope"><el-button>编辑 / 删除{{ scope.row }}</el-button></template></BaseTable></div></template><script>import BaseTable from "@/components/BaseTable";import { columns, tableData } from "./data";export default {components: {BaseTable},data() {return {columns,tableData,total: 30,queryParams: {pageNo: 1,pageSize: 30}};},methods: {getList() {console.log("请求数据", this.queryParams);}}};</script><style lang="scss" scoped>.base-table {height: 500px;margin-bottom: 100px;}</style>
数据：
export const columns = [{prop: 'text',label: '名称',},{prop: 'current',label: '本期',},{prop: 'previous',label: '上月同期',},{prop: 'lastCurrent',label: '去年同期',},{prop: 'currentRatio',label: '环比(%)',html: (row) => {return row.currentRatio < 0 ? `<span style="color: red;">${row.currentRatio}</span>` : row.currentRatio;},}, {prop: 'lastCurrentRatio',label: '同比(%)',html: (row) => {return row.lastCurrentRatio < 0 ? `<span style="color: red;">${row.lastCurrentRatio}</span>` : row.lastCurrentRatio;},},]export const tableData = [{text: 11,current: 11,previous: 'nini',lastCurrent: 22,currentRatio: 52525,lastCurrentRatio: -555}]
