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