ElementUI 插槽(v-slot)应用:列表中检索条件过多,导致界面不够简洁美观,进行动态展示/隐藏,检索条件。
话不多说上代码:
index.vue
<template>
<div class="fold-container">
<!-- 表单 -->
<div :class="{'filter-query':true,'folding':foldOrUnfold.query}">
<!-- 检索条件 -->
<slot name="querys" />
<!--折叠/展开操作按钮-->
<el-tooltip v-if="querys" :content="foldOrUnfold.query ? '折叠':'展开'" placement="bottom" effect="light">
<i v-if="foldOrUnfold.query" class="icon-diy" @click="handleQuerys">
<svg t="1716292425412" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2613" width="16" height="16"><path d="M300.95 512l268.651-360.113-90.225-67.275-318.825 427.387 318.825 427.387 90.225-67.275z" p-id="2614" fill="#cdcdcd" /><path d="M793.25 62v900h-112.501v-900h112.501z" p-id="2615" fill="#cdcdcd" /></svg>
</i>
<i v-else class="icon-diy" @click="handleQuerys">
<svg t="1716292159085" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2028" width="16" height="16"><path d="M752.128 512l-305.665 409.728 102.656 76.544 362.752-486.272-362.752-486.272-102.656 76.544z" p-id="2029" fill="#cdcdcd" /><path d="M192 1024v-1024h128v1024h-128z" p-id="2030" fill="#cdcdcd" /></svg>
</i>
</el-tooltip>
</div>
<!-- 按钮 -->
<div :class="{'filter-button':true,'folding':foldOrUnfold.button}">
<!-- 公共按钮 -->
<slot name="buttons" />
<!--折叠/展开操作按钮-->
<el-tooltip v-if="buttons" :content="foldOrUnfold.button ? '折叠':'展开'" placement="bottom" effect="light">
<i v-if="foldOrUnfold.button" class="icon-diy" @click="handleButtons">
<svg t="1716292425412" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2613" width="16" height="16"><path d="M300.95 512l268.651-360.113-90.225-67.275-318.825 427.387 318.825 427.387 90.225-67.275z" p-id="2614" fill="#cdcdcd" /><path d="M793.25 62v900h-112.501v-900h112.501z" p-id="2615" fill="#cdcdcd" /></svg>
</i>
<i v-else class="icon-diy" @click="handleButtons">
<svg t="1716292159085" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2028" width="16" height="16"><path d="M752.128 512l-305.665 409.728 102.656 76.544 362.752-486.272-362.752-486.272-102.656 76.544z" p-id="2029" fill="#cdcdcd" /><path d="M192 1024v-1024h128v1024h-128z" p-id="2030" fill="#cdcdcd" /></svg>
</i>
</el-tooltip>
</div>
</div>
</template>
<script>
import FormFolding from './index'
export default FormFolding
</script>
<style lang="scss" src="./index.scss" />
index.js
export default {
name: 'FilterFormFolding',
directives: { },
props: {
querys: {
type: Boolean,
default: true
},
buttons: {
type: Boolean,
default: false
}
},
data() {
return {
// 折叠&展开
foldOrUnfold: {
query: false,
button: false
}
}
},
created() {
},
methods: {
handleQuerys() {
this.foldOrUnfold.query = !this.foldOrUnfold.query
},
handleButtons() {
this.foldOrUnfold.button = !this.foldOrUnfold.button
}
}
}
index.scss
.fold-container{
display: inline-table;
.filter-query,.filter-button{
display: inline;
float: revert;
.icon-diy{
box-sizing: border-box;
padding: 4px;
margin-right: 6px;
&:hover , &:active{
cursor: pointer;
}
}
.unfolding{
display:none;
}
&.folding{
.unfolding{
display:inline-grid;
}
}
}
}
以标签使用,将其设为全局控件,便以调用:
main.js
// >> 列表检索条件折叠展开
import FilterFormFolding from '@/components/FilterFormFolding/index.vue'
Vue.component('filter-form-folding', FilterFormFolding)
示例:
<!--搜索条件和新增按钮-->
<filter-form-folding>
<template v-slot:querys>
<el-input
v-model.trim="name"
placeholder="名称"
clearable
/>
<el-select v-model="type" placeholder="类别" class="unfolding" clearable>
<el-option v-for="item in datas" :key="item.keyer" :label="item.name" : value="item.keyer" />
</el-select>
</template>
<template v-slot:buttons>
<el-button> 重置</el-button>
<el-button> 查询</el-button>
<el-button> 新增</el-button>
</template>
</filter-form-folding>
<el-table>
.
.
.
</el-table>
界面效果: