优化表格上右侧工具条(搜索按钮显隐&右侧样式凸出)
无搜索条件时可通过search隐藏搜索按钮,工具条组右侧样式超出5px(相对于底部表格),其父节点gutter代码生成默认10,此处也默认10,使工具组样式左右一致
This commit is contained in:
		
							parent
							
								
									aff54ab5fe
								
							
						
					
					
						commit
						d4475d0e8d
					
				| @ -1,7 +1,7 @@ | ||||
| <template> | ||||
|   <div class="top-right-btn"> | ||||
|   <div class="top-right-btn" :style="style"> | ||||
|     <el-row> | ||||
|       <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top"> | ||||
|       <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search"> | ||||
|         <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" /> | ||||
|       </el-tooltip> | ||||
|       <el-tooltip class="item" effect="dark" content="刷新" placement="top"> | ||||
| @ -42,6 +42,23 @@ export default { | ||||
|     columns: { | ||||
|       type: Array, | ||||
|     }, | ||||
|     search: { | ||||
|       type: Boolean, | ||||
|       default: true, | ||||
|     }, | ||||
|     gutter: { | ||||
|       type: Number, | ||||
|       default: 10, | ||||
|     }, | ||||
|   }, | ||||
|   computed: { | ||||
|     style() { | ||||
|       const ret = {}; | ||||
|       if (this.gutter) { | ||||
|         ret.marginRight = `${this.gutter / 2}px`; | ||||
|       } | ||||
|       return ret; | ||||
|     } | ||||
|   }, | ||||
|   created() { | ||||
|     // 显隐列初始默认隐藏列 | ||||
|  | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user
	 abbfun
						abbfun