antvue table 表格实现首行搜索

我不是万庚

已于 2023-03-29 11:39:02 修改

阅读量1.1k

点赞数 2

文章标签： js javascript vue.js html5 css

于 2021-03-23 09:42:15 首次发布

本文链接：https://blog.csdn.net/Javanumbe/article/details/115109800

版权

本文详细介绍了如何在AntV Vue表格中实现首行搜索功能。通过创建一个自定义组件来渲染头部输入框，并在表格组件中引用，结合Vue的v-for指令和v-model实现数据绑定。在父组件中监听onSearch事件，根据输入值更新查询参数，调用搜索方法刷新列表数据。此功能适用于需要在表格中进行快速筛选的场景。

摘要由CSDN通过智能技术生成

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-input
          style="       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.dataIndex
      this.$set(this.queryParam, name, `*${item.filter}*`)
      //刷新列表数据的函数
      this.searchQuery()
    },