姓名：岳沁? 學號：17101223458
轉載自：http://www.lxweimin.com/p/91ae0724f5f3
【嵌牛導讀】：Element分析（組件篇）——Table
【嵌牛鼻子】：Table
【嵌牛提問】：Table如何實現將表頭放在左側？
【嵌牛正文】：
源碼解讀
首先是template部分。
:class="{
'el-table--fit': fit,
'el-table--striped': stripe,
'el-table--border': border,
'el-table--fluid-height': maxHeight,
'el-table--enable-row-hover': !store.states.isComplex,
'el-table--enable-row-transition': true || (store.states.data || []).length !== 0 && (store.states.data || []).length < 100
}"
@mouseleave="handleMouseLeave($event)">
:store="store"
:layout="layout"
:border="border"
:default-sort="defaultSort"
:style="{ width: layout.bodyWidth ? layout.bodyWidth + 'px' : '' }">
class="el-table__body-wrapper"
ref="bodyWrapper"
:style="[bodyHeight]">
:context="context"
:store="store"
:layout="layout"
:row-class-name="rowClassName"
:row-style="rowStyle"
:highlight="highlightCurrentRow"
:style="{ width: bodyWidth }">
:style="{ width: bodyWidth }"
class="el-table__empty-block"
v-if="!data || data.length === 0">
{{ emptyText || t('el.table.emptyText') }}
v-if="fixedColumns.length > 0"
:style="[
{ width: layout.fixedWidth ? layout.fixedWidth + 'px' : '' },
fixedHeight
]">
fixed="left"
:border="border"
:store="store"
:layout="layout"
:style="{ width: layout.fixedWidth ? layout.fixedWidth + 'px' : '' }">
:style="[
{ top: layout.headerHeight + 'px' },
fixedBodyHeight
]">
fixed="left"
:store="store"
:layout="layout"
:highlight="highlightCurrentRow"
:row-class-name="rowClassName"
:row-style="rowStyle"
:style="{ width: layout.fixedWidth ? layout.fixedWidth + 'px' : '' }">
v-if="rightFixedColumns.length > 0"
:style="[
{ width: layout.rightFixedWidth ? layout.rightFixedWidth + 'px' : '' },
{ right: layout.scrollY ? (border ? layout.gutterWidth : (layout.gutterWidth || 1)) + 'px' : '' },
fixedHeight
]">
fixed="right"
:border="border"
:store="store"
:layout="layout"
:style="{ width: layout.rightFixedWidth ? layout.rightFixedWidth + 'px' : '' }">
:style="[
{ top: layout.headerHeight + 'px' },
fixedBodyHeight
]">
fixed="right"
:store="store"
:layout="layout"
:row-class-name="rowClassName"
:row-style="rowStyle"
:highlight="highlightCurrentRow"
:style="{ width: layout.rightFixedWidth ? layout.rightFixedWidth + 'px' : '' }">
class="el-table__fixed-right-patch"
v-if="rightFixedColumns.length > 0"
:style="{
width: layout.scrollY ? layout.gutterWidth + 'px' : '0',
height: layout.headerHeight + 'px'
}">
class="el-table__column-resize-proxy"
ref="resizeProxy"
v-show="resizeProxyVisible">
其次是script的部分：
importElCheckboxfrom'element-ui/packages/checkbox';importthrottlefrom'throttle-debounce/throttle';importdebouncefrom'throttle-debounce/debounce';import{ addResizeListener, removeResizeListener }from'element-ui/src/utils/resize-event';importLocalefrom'element-ui/src/mixins/locale';importTableStorefrom'./table-store';importTableLayoutfrom'./table-layout';importTableBodyfrom'./table-body';importTableHeaderfrom'./table-header';import{ mousewheel }from'./util';lettableIdSeed =1;exportdefault{name:'ElTable',mixins: [Locale],props: {data: {type:Array,default:function(){return[];? ? ? }? ? },width: [String,Number],height: [String,Number],maxHeight: [String,Number],fit: {type:Boolean,default:true},stripe:Boolean,border:Boolean,rowKey: [String,Function],context: {},showHeader: {type:Boolean,default:true},rowClassName: [String,Function],rowStyle: [Object,Function],highlightCurrentRow:Boolean,currentRowKey: [String,Number],emptyText:String,expandRowKeys:Array,defaultExpandAll:Boolean,defaultSort:Object},components: {? ? TableHeader,? ? TableBody,? ? ElCheckbox? },methods: {// 切換選中的行toggleRowSelection(row, selected) {this.store.toggleRowSelection(row, selected);this.store.updateAllSelected();? ? },// 清空選中行clearSelection() {this.store.clearSelection();? ? },// 處理鼠標離開handleMouseLeave() {this.store.commit('setHoverRow',null);if(this.hoverState)this.hoverState =null;? ? },// 更新是否有縱向滾動updateScrollY() {this.layout.updateScrollY();? ? },// 綁定相關的時間監聽bindEvents() {const{ headerWrapper } =this.$refs;constrefs =this.$refs;// 同步三個 body 的滾動this.bodyWrapper.addEventListener('scroll',function(){if(headerWrapper) headerWrapper.scrollLeft =this.scrollLeft;if(refs.fixedBodyWrapper) refs.fixedBodyWrapper.scrollTop =this.scrollTop;if(refs.rightFixedBodyWrapper) refs.rightFixedBodyWrapper.scrollTop =this.scrollTop;? ? ? });// 表頭的鼠標滾動變成橫向滾動if(headerWrapper) {? ? ? ? mousewheel(headerWrapper, throttle(16, event => {constdeltaX = event.deltaX;if(deltaX >0) {this.bodyWrapper.scrollLeft +=10;? ? ? ? ? }else{this.bodyWrapper.scrollLeft -=10;? ? ? ? ? }? ? ? ? }));? ? ? }// 如果自適應的話，resize 的時候重新布局if(this.fit) {this.windowResizeListener = throttle(50, () => {if(this.$ready)this.doLayout();? ? ? ? });? ? ? ? addResizeListener(this.$el,this.windowResizeListener);? ? ? }? ? },// 布局doLayout() {this.store.updateColumns();this.layout.update();this.updateScrollY();this.$nextTick(()=>{if(this.height) {this.layout.setHeight(this.height);? ? ? ? }elseif(this.maxHeight) {this.layout.setMaxHeight(this.maxHeight);? ? ? ? }elseif(this.shouldUpdateHeight) {this.layout.updateHeight();? ? ? ? }? ? ? });? ? }? },? created() {this.tableId ='el-table_'+ tableIdSeed +'_';this.debouncedLayout = debounce(50, () =>this.doLayout());? },computed: {? ? bodyWrapper() {returnthis.$refs.bodyWrapper;? ? },? ? shouldUpdateHeight() {returntypeofthis.height ==='number'||this.fixedColumns.length >0||this.rightFixedColumns.length >0;? ? },? ? selection() {returnthis.store.selection;? ? },? ? columns() {returnthis.store.states.columns;? ? },? ? tableData() {returnthis.store.states.data;? ? },? ? fixedColumns() {returnthis.store.states.fixedColumns;? ? },? ? rightFixedColumns() {returnthis.store.states.rightFixedColumns;? ? },? ? bodyHeight() {letstyle = {};if(this.height) {? ? ? ? style = {height:this.layout.bodyHeight ?this.layout.bodyHeight +'px':''};? ? ? }elseif(this.maxHeight) {? ? ? ? style = {'max-height': (this.showHeader ?this.maxHeight -this.layout.headerHeight :this.maxHeight) +'px'};? ? ? }returnstyle;? ? },? ? bodyWidth() {const{ bodyWidth, scrollY, gutterWidth } =this.layout;returnbodyWidth ? bodyWidth - (scrollY ? gutterWidth :0) +'px':'';? ? },? ? fixedBodyHeight() {letstyle = {};if(this.height) {? ? ? ? style = {height:this.layout.fixedBodyHeight ?this.layout.fixedBodyHeight +'px':''};? ? ? }elseif(this.maxHeight) {letmaxHeight =this.layout.scrollX ?this.maxHeight -this.layout.gutterWidth :this.maxHeight;if(this.showHeader) {? ? ? ? ? maxHeight -=this.layout.headerHeight;? ? ? ? }? ? ? ? style = {'max-height': maxHeight +'px'};? ? ? }returnstyle;? ? },? ? fixedHeight() {letstyle = {};if(this.maxHeight) {? ? ? ? style = {bottom: (this.layout.scrollX &&this.data.length) ?this.layout.gutterWidth +'px':''};? ? ? }else{? ? ? ? style = {height:this.layout.viewportHeight ?this.layout.viewportHeight +'px':''};? ? ? }returnstyle;? ? }? },watch: {// 高度改變時，重新設定高度height(value) {this.layout.setHeight(value);? ? },// 當前行的 key 改變時，重新設置currentRowKey(newVal) {this.store.setCurrentRowKey(newVal);? ? },// 更新數據data: {immediate:true,? ? ? handler(val) {this.store.commit('setData', val);? ? ? }? ? },// 更改打開的行的 keyexpandRowKeys(newVal) {this.store.setExpandRowKeys(newVal);? ? }? },? destroyed() {// 移除 resize 監聽if(this.windowResizeListener) removeResizeListener(this.$el,this.windowResizeListener);? },? mounted() {this.bindEvents();this.doLayout();this.$ready =true;? },? data() {// 狀態管理conststore =newTableStore(this, {rowKey:this.rowKey,defaultExpandAll:this.defaultExpandAll? ? });// 布局管理constlayout =newTableLayout({? ? ? store,table:this,fit:this.fit,showHeader:this.showHeader? ? });return{? ? ? store,? ? ? layout,renderExpanded:null,resizeProxyVisible:false};? }};
