antvue table 表格實(shí)現(xiàn) 首行搜索

首先創(chuàng)建一個(gè)組件用來(lái)渲染 頭部輸入框

<template><div class="filter"><tr><th><div class="selectDiv"></div></th><th v-for="(item, index) in columns" :key="index"><div class="selectDiv" :style="'width:' + item.width + 'px'"><a-inputstyle=" text-align: inherit; min-width: 150px;"v-if="index >= deviationNumber":placeholder="'請(qǐng)輸入' + item.title"v-model="item.filter"@change="onSearch(item)"/></div></th></tr></div> </template> <script> export default {data() {return {value: '',}},props: {columns: {type: Array,},deviationNumber:{type: Number,default:2,}},methods: {select() {console.log(this.columns)},onSearch(item) {// console.log(item);this.$emit('onSearch', item)},}, } </script>

接著在 ant vue table 頁(yè)面引用該 組件，并傳入表頭columns [ ] 數(shù)據(jù)集合（具體用法參閱官方文檔）

columns 集合實(shí)例：

columns: [{title: '操作',dataIndex: 'action',align: 'center',// fixed: 'right',width: 147,scopedSlots: { customRender: 'action' },},{title: '名稱(chēng)',align: 'center',dataIndex: 'name',},],

組件使用示例

<filterth ref="filterth" @onSearch="onSearchFilter" :deviationNumber="1" :columns="columns"></filterth>

接著在使用該組件 的頁(yè)面 mounted函數(shù)里渲染組件至 表格頭部

mounted() {this.$nextTick(() => {this.$refs.table.$el.getElementsByTagName('thead')[0].appendChild(this.$refs.filterth.$el.getElementsByTagName('tr')[0])})},

onSearchFilter 方法

主要 實(shí)現(xiàn)輸入框值的獲取 和查詢(xún)
具體根據(jù)自己業(yè)務(wù)實(shí)際情況編寫(xiě) 以下 僅供參考

onSearchFilter(item) {if (item.filter == undefined) {return}// console.log( this.queryParamData )let name = item.dataIndexthis.$set(this.queryParam, name, `*${item.filter}*`)//刷新列表數(shù)據(jù)的函數(shù)this.searchQuery()},

總結(jié)

以上是生活随笔為你收集整理的antvue table 表格实现 首行搜索的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。