vue 仿el-table原理实现表格

element-ui是国内最流行的的vue开源框架，el-table组件在element-ui整个框架中是最复杂、最重要的部分。其中涉及到的知识有JSX，render渲染函数，组件间的状态管理等等。出于好奇和挑战，在网上受教于el的源代码以及网上相关内容资料。完成了一个简单基础的table组件就叫 sd-table吧。

支持功能：自定义列、支持自定义插槽、支持自定义排序、支持全选、多选、分页回调、宽高样式等。

el-table 源码传送门：element: Element 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。 - Gitee.com

1.效果及使用方法

1.1 使用方法：

使用方法如下，看看是不是特别熟悉？与 el-table是否类似呢？

<sd-table :data = "tableData"ref="sdTable":width="'800'":height="'500'":total="1000":current-page="currentPage"@selection-change="handleSelectionChange"@loadMore = 'loadMore'><sd-table-column  type="selection" width="20"></sd-table-column><sd-table-column  width="100" label="solt列"><template slot-scope="scope"><img src="../assets/vip-icon-hui-5.png"  style="width: 25px"><span>{{ scope.row.name }}</span></template></sd-table-column><sd-table-column prop="name" label="姓名" width="200" sortable></sd-table-column><sd-table-column prop="date" label="日期" width="200" sortable></sd-table-column><sd-table-column  prop="address" label="地址" ></sd-table-column></sd-table>

1.2效果图

2.代码

2.1 sd-table-body.js

sd-table-body 主要是渲染整体表格，使用render 函数循环二维数组遍历tr行遍历 td列。

export default {name:'sd-table-body',computed:{table(){return this.$parent}},props:{store: {require: true}},methods:{getBodyCellStyle(column){return {width: column.width + 'px','text-align': column.align}},},render(h) {let tableData = this.table.tableData ;let columns = this.store.getColumns() ;let tableWidth = this.store.getTableWidth() ;return (<table cellspacing="0" border='0' cellpadding="0" style={{width: tableWidth + 'px'}}>{tableData.map((row, index) =><tr  class={['sd-table-tr',row.$checked?'sd-table-tr-choose':'']}>{columns.map(column => <td class={'sd-table-body__td'} style={this.getBodyCellStyle(column)}><div>{column.renderCell(row, index)}</div></td>)}</tr>)}</table>)}
}

2.2 sd-table-column.js

sd-table-column.js 此组件主要是渲染列相关内容，判断type 是selection或 index 或者是自定义插槽。若type=“selection” 为多选框，type=“index” 为行序号自定义插槽则直接显示自定义插槽内容，插槽内容可以为组件或html。

代码如下：

let columnIdSeed = 0 ;
export default  {name: 'sd-table-column',computed:{tableColumnId(){return 'columnId-' + (columnIdSeed++)},table(){return this.$parent},},props:{label: String,prop: String,width: String,align: String,type: String,sortable:{type:Boolean,default:false,}},data(){return{column:{},value_2: false,}},methods:{renderCell(data,index){let curIndex = index + 1 ;if(this.type ==='index') {return curIndex ;}if(this.type ==='selection') {this.column.renderCell = (data,index) => (<div class="cell"><input type="checkbox"   checked={data.$checked}  on-click={ ($event) => this.selectionChange($event, data) }  id={index}/></div>);return ;}if(this.prop) return data[this.prop]return this.$scopedSlots.default({$index: curIndex,row: data})},selectionChange(event,row){let isExist = false ;if(row.$checked){//row.$checked = !row.$checkedthis.$set(row,'$checked',!row.$checked);}else{this.$set(row,'$checked',true);//row.$checked = true ;}if(row.$checked){this.table.selectRowData.forEach((item)=>{if(item == row){isExist = true ;}})if(!isExist){this.table.selectRowData.push(row) ;}}else{for(let i = 0 ; i <  this.table.selectRowData.length ; i ++){if(this.table.selectRowData[i] == row){this.table.selectRowData.splice(i,1);}}}this.table.$emit("selection-change",this.table.selectRowData) ;},test(event,data){console.log(event.target.id);}},watch:{value_2(newVal){console.log(newVal)}},created(){this.column = {tableId: this.table.tableId,columnId: this.tableColumnId,label: this.label,prop: this.prop,originWidth: this.width,width: 0 ,slots: this.$slots.default,align: this.align,renderCell: this.renderCell,type: this.type,sortable:this.sortable,}this.table.store.insertColumn(this.column)},render(h){return h('div', this.$slots.default) ;}
}

2.3 sd-table-head.js

此组件是表头内容，组件拿到columns 这个表头数组，通过render函数内遍历可得到表头行，这里涉及到一个chekbox和排序。不涉及复杂表头，复杂表头以后研究。

export default {name: 'sd-table-head',data(){return{columns:[],// 实现排序功能"asc-n": (a, b) => a - b,"desc-n": (a, b) => b - a,"asc-s": (a, b) => a.localeCompare(b),"desc-s": (a, b) => b.localeCompare(a),}},computed:{table(){return this.$parent}},props:{store:{require: true}},methods:{getHeaderCellStyle(column){return {width: column.width + 'px'}},handleSortClick(event, column, givenOrder) {event.stopPropagation();if (!column.sortable) return;this.$set(this.table,'order',givenOrder);console.log(this.table.order)this.sort(givenOrder,column) ;this.$emit('sort-change',givenOrder);},sort(type,column) {// 是否排序if (column.sortable) {// 对父父亲元素进行排序this.$parent.tableData.sort((a, b) => {// 调用排序规则，传入排序方式asc、desc，然后判断数据类型进行拼接后调用方法实现排序return this[type + this.getSortType(a[column.prop])](a[column.prop],b[column.prop]);});}},selectAll(){this.table.isSelectedAll = !this.table.isSelectedAll;if(this.table.isSelectedAll ){this.table.toggleRowSelection(this.table.tableData) ;}else{this.table.clearSelection();}},// 处理排序类型getSortType(val) {// 返回标识串进行拼接return typeof val === "string" ? "-s" : "-n";},},created(){this.columns = this.store.getColumns() ;},render(h) {let columns = this.store.getColumns() ;let tableWidth = this.store.getTableWidth() ;return (<table cellspacing="0" border="0" cellpadding="0" style={{width: tableWidth+'px'}}>{<tr>{columns.map(column=><td  style={this.getHeaderCellStyle(column)}>{(column.type =='selection')?(<input  type='checkbox' checked={this.table.isSelectedAll} on-click={ ($event) => this.selectAll() }/>):(column.label)}{column.sortable ? (<spanclass="caret-wrapper"><i class={['sort-caret ascending',this.table.order=='asc'?'ascending ':'']}on-click={ ($event) => this.handleSortClick($event, column, 'asc') }></i><i class={['sort-caret descending',this.table.order=='desc'?'descending':'']}on-click={ ($event) => this.handleSortClick($event, column, 'desc') }></i></span>) : ''}</td>)}</tr>}</table>);},
}

2.4 sd-table-store.js

store 主要是保存列数据以及表的基本数据信息，方便以上各个组件初始化使用

export default class SdTableStore {constructor(tableId) {this.storeid = 'store-' + tableId ;this.columns = [] ;this.columnLabelMap = {} ;this.realTableWidth = 0 ;}insertColumn (column){this.columns.push(column) ;this.columnLabelMap[column.columnId] = column.label}getColumns(){return this.columns ;}updateTableWidth (width) {this.realTableWidth = width ;}getTableWidth () {return this.realTableWidth ;}
}

2.5 util.js

此工具方法为了计算列宽。


function  calcColumnWidth (columns, table) {let bodyWidth = table.$el.clientWidth - 24let tableWidth = 0let flexColumns = []flexColumns = columns.filter(column => {if (typeof column.originWidth !== 'string') return column})for (let column of columns) {column.width = column.originWidth || 80tableWidth += parseInt(column.width)}// 宽度有富余if (tableWidth < bodyWidth) {// 富余宽度let flexWidth = bodyWidth - tableWidthlet flexSpaceWidth = parseInt(flexWidth / flexColumns.length)flexColumns[0].width += flexWidth - flexSpaceWidth * (flexColumns.length - 1)for (let i = 1; i < flexColumns.length; i++) {flexColumns[i].width += flexSpaceWidth}table.store.updateTableWidth(bodyWidth)} else {table.store.updateTableWidth(tableWidth)}return columns ;
}
export {calcColumnWidth}

2.6 sd-table.vue

此组件是以上组件的父组件，负责组织和调用以上组件。

代码如下：

<template><div class="sd-table":class="[{'sd-table--border': border}]":style="tableStyle"><!-- 隐藏列 --><div class="hidden-columns"><slot></slot></div><div class="pos-relative"><div class="header-warp" :ref="headRef"><sd-table-head class="sd-table-head" :store="store"></sd-table-head></div><!-- 遮挡竖直滚动条 --><div class="hiddenBlock"></div></div>
<!--    <div v-loading="loadingFlag" class="pos-relative" :class="textAlign">--><div  class="pos-relative" :class="textAlign"><div :style="bodyWrapperStyle" class="body-wrap" :ref="bodyRef" @scroll="handleScroll"><sd-table-body :store="store"></sd-table-body></div><div class="noData flex-midcenter" v-show="!data.length">暂无数据</div></div></div>
</template><script>
import SdTableStore from "./sd-table-store";
import SdTableHead  from "./sd-table-head";
import SdTableBody  from "./sd-table-body";
import {calcColumnWidth} from '@/utils/util';
let tableIdSeed = 0 ;
export default {name: "sd-table",data () {return {store: null,curPage: 1,allPages: 0,bodyWrapperStyle: {height: this.height+'px','text-align': this.align,overflow: 'auto'},loadingFlag: true,tableStyle: {width: this.width},fixedHeight: 1,tableData: [],selectRowData:[],isSelectedAll:false,order:'asc',}},computed: {tableId () {return 'tableId-' + (tableIdSeed++)},bodyRef () {return 'tableBody-' + tableIdSeed},tBody () {return this.$refs[this.bodyRef]},headRef () {return 'tableHead-' + tableIdSeed},tHead () {return this.$refs[this.headRef]},'textAlign' () {return 'align-' + this.align}},components:{SdTableHead,SdTableBody,},props: {data: {type: Array,default () {return []}},width: {type: String,default: '100%'},total: {type: [Number, String],default: 0},align: {type: String,default: 'center'},height: {type: String,default: '300'},border: Boolean,currentPage: {type: Number,default: 1}},methods: {initData () {this.curPage = 1this.tableData = []this.allPages = Math.ceil(parseInt(this.total) / this.data.length)//this.tBody.scrollTop = 0},handleScroll (e) {this.tHead.scrollLeft = this.tBody.scrollLeft// fixedHeight修正由水平滚动条带来的高度计算误差if ((this.tBody.scrollTop + this.tBody.clientHeight + this.fixedHeight >= this.tBody.scrollHeight) && (this.curPage < this.allPages)) {this.loadingFlag = truethis.$emit('loadMore', ++this.curPage)}},toggleRowSelection(rows){// 交集this.tableData.forEach((item)=>{rows.forEach((itm)=>{if(item == itm){this.$set(item,"$checked",true);}})})this.selectRowData = rows ;console.log(this.selectRowData) ;},clearSelection(){this.selectRowData = [] ;this.isSelectedAll = false;this.tableData.forEach((item)=>{this.$set(item,"$checked",false);})},doLayout () {calcColumnWidth(this.store.columns, this)}},watch: {data: {deep: true,immediate: true,handler (n, o) {this.loadingFlag = falseif (this.currentPage === 1) {this.initData()}this.tableData = [...this.tableData, ...n]}}},created () {let store = new SdTableStore(this.tableId)this.store = store;},mounted () {if (!this.data.length) {this.loadingFlag = false}let self = this;self.doLayout()window.addEventListener('resize', function () {self.doLayout()})},
}
</script><style>.sd-table{width: 100%;padding: 5px 20px 5px 20px;display: flex;flex-direction: column;box-sizing: border-box;
}
.sd-table .header-warp{width: 100%;display: flex;flex-direction: row;align-items: center;font-size: 12px;padding: 10px 0 10px 0;
}.body-wrap {position: relative;
}.sd-table-tr{height: 60px;background-color: white;border-top: 1px solid #eeeeee;display: flex;align-items: center;font-size: 14px;transition: border-color .3s,background-color .3s,color .3s;flex-shrink: 0;
}.sd-table-tr:hover{padding: 0 0 0 0;background-color: #e8f8f7;
}/**当选中，item背景状态**/
.sd-table-tr-choose{padding: 0 0 0 0;background-color: #e8f8f7 !important;
}.checkboxshow{visibility:visible !important;
}.sd-table .item input[type=checkbox]{visibility:visible;
}.sd-table .item:hover .share{display: block;
}.sd-table .item:hover .itesd-time>span{display: none;
}.hiddenBlock {position: absolute;background: $head-bg;width: 25px;height: calc(100% - 1px);top: 0;right: 0;border-bottom: $border;
}.forbidden-child-pointer-events >* {pointer-events: none;
}.sd-table .caret-wrapper {display: inline-flex;flex-direction: column;align-items: center;height: 34px;width: 24px;vertical-align: middle;overflow: initial;position: relative;
}
.sort-caret.ascending {border-bottom-color: #c0c4cc;top: 5px;
}
.sort-caret-ascending {border-bottom-color: #409eff;
}.sort-caret.descending {border-top-color: #409eff;
}
.sort-caret.descending {border-top-color: #c0c4cc;bottom: 7px;
}.sort-caret {width: 0;height: 0;border: 5px solid transparent;position: absolute;left: 7px;
}</style>

2.6 test-table.vue

test-table.vue 用于调用测试表格使用。mbutton 为我自定义的组件，请自行去掉或替换。

我们可以看到基本与el-table 的使用用法一致。当然目前功能不完善，功能性不如element-ui。但是自定义插槽、多选排序以及分页功能是我们经常用到的，足够用了。

<template>
<div><sd-table :data = "tableData"ref="sdTable":width="'800'":height="'500'":total="1000":current-page="currentPage"@selection-change="handleSelectionChange"@loadMore = 'loadMore'><sd-table-column  type="selection" width="20"></sd-table-column><sd-table-column  width="100" label="solt列"><template slot-scope="scope"><img src="../assets/vip-icon-hui-5.png"  style="width: 25px"><span>{{ scope.row.name }}</span></template></sd-table-column><sd-table-column prop="name" label="姓名" width="200" sortable></sd-table-column><sd-table-column prop="date" label="日期" width="200" sortable></sd-table-column><sd-table-column  prop="address" label="地址" ></sd-table-column></sd-table><button style="width: 100px;height: 50px" @click="add">添加数据</button><button style="width: 100px;height: 50px" @click="figureChoose">指定选择</button><button style="width: 100px;height: 50px" @click="cancel">取消选择</button>
</div>
</template><script>
import SdTable from "../components/table/sd-table";
import SdTableColumn from "../components/table/sd-table-column";
import Mbutton from "../components/mbutton";
export default {name: "test-table",components: {Mbutton, SdTableColumn, SdTable},data(){return {tableData: [{no: 0,date: "2022-01-01",name: "徐凤年",address: "北凉国",},{no: 1,date: "2022-01-02",name: "姜泥",address: "楚国",},{no: 2,date: "2022-01-03",name: "王仙芝",address: "武帝城",},{no: 3,date: "2022-01-04",name: "李淳罡",address: "剑仙一键开天门",}],currentPage: 1,}},methods:{add(){let one = {no: 5,date: "2022-01-05",name: "呵呵姑娘",address: "不详",};this.tableData.push(one);},figureChoose(){this.$refs.sdTable.toggleRowSelection([this.tableData[1],this.tableData[2]])},handleSelectionChange(val){console.log("handleSelectionChange",val);},cancel(){this.$refs.sdTable.clearSelection();console.log("cancel");},loadMore(val){console.log(val);this.currentPage = val ;}}
}
</script><style scoped></style>

感谢阅读！