增加 el-table 自适应高度组件
This commit is contained in:
		
							
								
								
									
										32
									
								
								src/directive/el-table/adaptive.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										32
									
								
								src/directive/el-table/adaptive.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,32 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
 | 
					export default{
 | 
				
			||||||
 | 
					  /**
 | 
				
			||||||
 | 
					   * 仅当 el-table :data属性为动态加载(不包括computed)才会触发此事件
 | 
				
			||||||
 | 
					   * @param {*} el
 | 
				
			||||||
 | 
					   * @param {*} binding
 | 
				
			||||||
 | 
					   * binding.value 格式为 {
 | 
				
			||||||
 | 
					   *      table: $refs.table, //  表格对象
 | 
				
			||||||
 | 
					   *      topHeight: 10      //  表格顶边 距离顶部高度,默认值为  10
 | 
				
			||||||
 | 
					   *      footerHeight: 10   //  表格底部 距离底部高度,默认值为  10
 | 
				
			||||||
 | 
					   * }
 | 
				
			||||||
 | 
					   * @param {*} vnode
 | 
				
			||||||
 | 
					   * @param {*} oldVnode
 | 
				
			||||||
 | 
					   */
 | 
				
			||||||
 | 
					  update(el, binding, vnode, oldVnode) {
 | 
				
			||||||
 | 
					    let topHeight = binding.value.topHeight ? binding.value.topHeight : 10
 | 
				
			||||||
 | 
					    let footerHeight = binding.value.footerHeight ? binding.value.footerHeight : 10
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    let table = binding.value.table
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    let tableHeight = window.innerHeight - el.offsetTop - footerHeight - topHeight;
 | 
				
			||||||
 | 
					    table.layout.setHeight(tableHeight)
 | 
				
			||||||
 | 
					    table.doLayout()
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    // 监听窗口大小变化
 | 
				
			||||||
 | 
					    window.addEventListener("resize", () => {
 | 
				
			||||||
 | 
					      tableHeight = window.innerHeight - el.offsetTop - footerHeight - topHeight
 | 
				
			||||||
 | 
					      table.layout.setHeight(tableHeight)
 | 
				
			||||||
 | 
					      table.doLayout()
 | 
				
			||||||
 | 
					    })
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
							
								
								
									
										14
									
								
								src/directive/el-table/index.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										14
									
								
								src/directive/el-table/index.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,14 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
 | 
					import adaptive from './adaptive'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const install = function(Vue) {
 | 
				
			||||||
 | 
					  Vue.directive('el-height-adaptive-table', adaptive)
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					if (window.Vue) {
 | 
				
			||||||
 | 
					  window['el-height-adaptive-table'] = adaptive
 | 
				
			||||||
 | 
					  Vue.use(install); // eslint-disable-line
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					adaptive.install = install
 | 
				
			||||||
 | 
					export default adaptive
 | 
				
			||||||
		Reference in New Issue
	
	Block a user