如何在v-client-table中获取列搜索框输入文本以实现自定义列过滤？

你可以通过v-client-table自带的customFilter配置直接获取Name列搜索框的输入值，全程不需要修改或替换原生列搜索框，实现逻辑如下：
customFilter回调默认传入两个参数：当前遍历的行数据、全局查询对象，其中query.filters.name就是Name列过滤器的用户输入值，直接调用即可实现自定义过滤逻辑。

完整实现代码 #

模板部分

<!-- 给表格组件绑定ref，方便后续有额外需求时调用内部属性 -->
<v-client-table 
  :columns="columns" 
  :data="tableData" 
  :options="tableOptions"
  ref="clientTable"
></v-client-table>

配置部分

data() {
  return {
    tableData: [/* 你的表格数据 */],
    columns: ['name', 'manufacturer', 'birth_date', 'age'],
    tableOptions: {
      dateColumns: ['birth_date'],
      filterable: ['name','manufacturer', 'birth_date'],  
      headings: {
        name: 'Name',
        birth_date: 'Birth Date',
        age: 'Age',
      },
      // 新增自定义过滤逻辑
      customFilter: (row, query) => {
        // 获取Name列搜索框输入值，无输入时默认为空字符串
        const nameInput = query.filters.name || ''
        // 无输入时不过滤，直接返回true
        if (!nameInput.trim()) return true
        // 此处替换为你自己的自定义过滤逻辑，示例为忽略大小写的模糊匹配
        return row.name.toLowerCase().includes(nameInput.toLowerCase().trim())
      }
    }
  }
}

额外需求适配 #

如果需要在过滤逻辑之外单独监听Name列的输入值变化，可以通过watch监听ref绑定的表格实例属性：

watch: {
  '$refs.clientTable.query.filters.name'(newVal) {
    // 输入值变化时触发你需要的其他逻辑
    console.log('Name列当前输入值：', newVal)
  }
}

内容的提问来源于stack exchange，提问作者Nanda