avue.js表格添加搜索条件
1.创建表格，添加搜索条件
<avue-crud
ref="indexDistributionTable"
:data="pageData"
:option="option"
:page.sync="page"
@selection-change="selectionChange"
@size-change="sizeChange"
@current-change="currentChange"
@search-change="searchChange"
@search-reset="searchReset"
>
<template slot="search">
<el-form-item label="指标名称">
<el-input v-model="searchForm.indexName" placeholder="请输⼊指标名称" size="small" />
</el-form-item>
</template>
</avue-crud
表格的其他属性此前已经有对应的⽂章了()，不在重复说明，搜索在avue-crud标签中，添加了⼀个template的标签，solt属性为search，将搜索条件添加在这个标签中就可以了，这⾥我添加了⼀个输⼊框作为搜索条件
2.⽅法属性设置
@search-change⽤来表⽰搜索条件改变时触发的⽅法
@search-reset⽤来表⽰搜索条件重置(清空)时调⽤的⽅法
在data中添加属性
searchForm: {
indexName: ''
}
在method中添加@search-change和@search-reset绑定的⽅法
searchChange() {
this.page.currentPage = 1
},
searchReset() {
this.page.currentPage = 1
this.searchForm.indexName = ''
},
搜索条件改变的时候，将当前页码重置为1，并且调⽤分页⽅法
搜索条件重置的时候，将当前页码重置为1，搜索条件清空，调⽤分页⽅法
分页⽅法中查询的时候代⼊了查询条件indexName和分页参数
getPageData() {
const params = {
currentPage: this.page.currentPage,
pageSize: this.page.pageSize,
indexName: this.searchForm.indexName
}
getSelectedIndexPageData(params).then(response => {
if (response.status !== 200) {
this.$message({
message: Message,
type: 'error'
})
} else {
const data = response.data
javascript说明
this.pageData = data.data
al = al)
}
})
},
3.结果说明
添加搜索条件后，界⾯如图所⽰
搜索按钮绑定的就是@search-change事件，清空按钮绑定的就是@search-reset事件
4.⾃定义按钮
avue-crud标签中添加标签slot为searchMenu，内部添加按钮，并设置点击事件就可以实现⾃定义搜索条件了
<avue-crud
ref="indexDistributionTable"
:data="pageData"
:option="option"
:page.sync="page"
@selection-change="selectionChange"
@size-change="sizeChange"
@current-change="currentChange"
@search-change="searchChange"
@search-reset="searchReset"
>
<template slot="search">
<el-form-item label="指标名称">
<el-input v-model="searchForm.indexName" placeholder="请输⼊指标名称" size="small" />        </el-form-item>
</template>
<template slot="searchMenu">
<el-button :size="size" @click="alert('⾃定义提交')">⾃定义提交</el-button>
</template>
</avue-crud>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。