antvue table 表格實現 首行搜索

首先創建一個組件用來渲染 頭部輸入框

<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="'請輸入' + 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 頁面引用該 組件，并傳入表頭columns [ ] 數據集合（具體用法參閱官方文檔）

columns 集合實例：

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

組件使用示例

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

接著在使用該組件 的頁面 mounted函數里渲染組件至 表格頭部

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

onSearchFilter 方法

主要 實現輸入框值的獲取 和查詢
具體根據自己業務實際情況編寫 以下 僅供參考

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。