安卓app制作入门教程,网站推广与seo的区别,发布新闻的平台有哪些,小程序的类型有哪些一、需求 el-form如果查询条件过多#xff0c;影响页面的展示效果。查询条件表单是我们系统中非常常见的功能#xff0c;我们需要把它封装成一个通用的组件#xff0c;方便在系统开发中提升开发效率。除了在实现基本查询条件的功能上#xff0c;还需要实现多条件的折叠和展…一、需求 el-form如果查询条件过多影响页面的展示效果。查询条件表单是我们系统中非常常见的功能我们需要把它封装成一个通用的组件方便在系统开发中提升开发效率。除了在实现基本查询条件的功能上还需要实现多条件的折叠和展开功能 二、效果图 三、 代码示例
封装查询条件表单组件 SearchButton.vue
templatedivel-col :span1.5 classelrowel-form-itemel-button typeprimary iconel-icon-search sizemini查询/el-button/el-form-item/el-colel-col :span1.5 classelrowel-form-itemel-button typeprimary iconel-icon-refresh sizemini重置/el-button/el-form-item/el-colel-col :span1.5 classelrowel-form-itemel-button typetext sizemini clickcloseSearch{{ word }}i :classshowAll ? el-icon-arrow-up : el-icon-arrow-down //el-button/el-form-item/el-col/div
/templatescript
export default {props: {showAll: {type: Boolean,defalut: true}},computed: {word: function() {if (this.showAll false) {// 对文字进行处理return 展开搜索} else {return 收起搜索}}},mounted() {/*** 收起搜索*/this.$nextTick(function() {this.closeSearch()})},methods: {closeSearch() {// this.showAll !this.showAll;this.$emit(closepop)console.log(子组件的状态 this.showAll)}}
}
/scriptstyle
/style使用查询条件表单组件引入组件即可
templatediv classapp-containerel-row :gutter20el-form refcondForm :modelcondForm label-width100px :inlinetrueel-row classbtnRowel-col :span6 classelrowel-form-item label线索编号1 propxsbh stylepadding-left: 10px;el-input v-modelcondForm.xsbh sizemini clearable stylewidth: 160px; //el-form-item/el-colel-col :span6 classelrowel-form-item label线索类型1 propxslxel-select v-modelcondForm.xslx sizemini stylewidth: 160px;el-optionv-foritem in xslxoptions:keyitem.id:labelitem.name:valueitem.id//el-select/el-form-item/el-colel-col :span6 classelrowel-form-item label线索来源1 propxsxzel-select v-modelcondForm.xsxz sizemini stylewidth: 160px;el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value//el-select/el-form-item/el-colel-col :span6 :class!showAll ? btnRow : unBtnRowel-form-item label线索编号1 propxsbh stylepadding-left: 10px;el-input v-modelcondForm.xsbh sizemini clearable stylewidth: 160px; //el-form-item/el-colsearch-button v-showshowAll :show-allshowAll closepopclosepop //el-rowel-row :class!showAll ? btnRow : unBtnRowel-col :span6 classelrowel-form-item label线索编号2 propxsbh stylepadding-left: 10px;el-input v-modelcondForm.xsbh sizemini clearable stylewidth: 160px; //el-form-item/el-colel-col :span6 classelrowel-form-item label线索类型2 propxslxel-select v-modelcondForm.xslx sizemini stylewidth: 160px;el-optionv-foritem in xslxoptions:keyitem.id:labelitem.name:valueitem.id//el-select/el-form-item/el-colel-col :span6 classelrowel-form-item label线索来源2 propxsxzel-select v-modelcondForm.xsxz sizemini stylewidth: 160px;el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value//el-select/el-form-item/el-colel-col :span6 classelrowel-form-item label线索来源2 propxsxzel-select v-modelcondForm.xsxz sizemini stylewidth: 160px;el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value//el-select/el-form-item/el-col el-col :span6 classelrowel-form-item label线索来源2 propxsxzel-select v-modelcondForm.xsxz sizemini stylewidth: 160px;el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value//el-select/el-form-item/el-col el-col :span6 classelrowel-form-item label线索来源2 propxsxzel-select v-modelcondForm.xsxz sizemini stylewidth: 160px;el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value//el-select/el-form-item/el-col el-col :span6 classelrowel-form-item label线索来源2 propxsxzel-select v-modelcondForm.xsxz sizemini stylewidth: 160px;el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value//el-select/el-form-item/el-col el-col :span6 classelrowel-form-item label线索来源2 propxsxzel-select v-modelcondForm.xsxz sizemini stylewidth: 160px;el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value//el-select/el-form-item/el-col el-col :span6 classelrowel-form-item label线索来源2 propxsxzel-select v-modelcondForm.xsxz sizemini stylewidth: 160px;el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value//el-select/el-form-item/el-col el-col :span6 classelrowel-form-item label线索来源2 propxsxzel-select v-modelcondForm.xsxz sizemini stylewidth: 160px;el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value//el-select/el-form-item/el-col el-col :span6 classelrowel-form-item label线索来源2 propxsxzel-select v-modelcondForm.xsxz sizemini stylewidth: 160px;el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value//el-select/el-form-item/el-col el-col :span6 classelrowel-form-item label线索来源2 propxsxzel-select v-modelcondForm.xsxz sizemini stylewidth: 160px;el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value//el-select/el-form-item/el-col el-col :span6 classelrowel-form-item label线索来源2 propxsxzel-select v-modelcondForm.xsxz sizemini stylewidth: 160px;el-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value//el-select/el-form-item/el-colSearchButton v-show!showAll :show-allshowAll closepopclosepop //el-row/el-form/el-rowel-tablerefmultipleTable:datatableDatasizemedium:header-cell-style{background:#f5f7fa}:heighttableHeightstripefithighlight-current-rowborderstylewidth: 100%;height:50pxel-table-column typeselection width55 aligncenter /el-table-columnel-table-column typeindex width55 aligncenter label序号 min-width209 /el-table-column label查看 width60 aligncentertemplate slot-scopescopeel-button typetext sizesmall aligncenter查看/el-button/template/el-table-columnel-table-column label删除 width60 aligncentertemplate slot-scopescopeel-button typetext sizesmall aligncenter删除/el-button/template/el-table-columnel-table-column propjhbh label计划编号 :show-overflow-tooltiptrue aligncenter /el-table-column propxszt label状态 aligncenter min-width100 //el-table-column/el-table!--分页查询工具条--el-col :span24 classtoolbarel-paginationstylemargin-right: 8px;text-align: right;:page-sizespageSizes:page-sizepageSize:totaltotalPage:current-page.syncpageIndexbackgroundlayouttotal, sizes, prev, pager, next, jumper//el-col/div
/templatescript
import SearchButton from /components/SearchButton/index.vue
export default {name: User,dicts: [sys_normal_disable, sys_user_sex],components: {SearchButton},data() {return {showAll: true,tableData: [],// 查询条件formcondForm: {},condition: ,xslxoptions: [{id: 1,name: 土地},{id: 2,name: 房屋},{id: 3,name: 矿产}],options: [{value: 1,label: 动态巡查}, {value: 2,label: 电话举报}, {value: 3,label: 信访举报}, {value: 4,label: 媒体曝光}, {value: 5,label: 其他单位转交}, {value: 6,label: 其他}],pageIndex: 0,pageSize: 0,pageSizes: [20, 50, 100, 200],totalPage: 0// height: window.innerHeight - 200,}},computed: {tableHeight() {if (this.showAll) {return window.innerHeight - 140} else {return window.innerHeight - 200}}},methods: {closepop() {this.showAll !this.showAllconsole.log(父组件的状态 this.showAll)}}
}
/script
style.btnRow {display: block;}.unBtnRow {display: none;}
/style
