姓名：岳沁 学号：17101223458
转载自：http://www.jianshu.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}; }};
网友评论