在Vue.js中每列需要一个文本筛选器

// 注册自定义指令
Vue.directive('column-filter', {
  bind: function (el, binding, vnode) {
    // 在绑定时执行一些初始化操作
    // el为绑定指令的元素
    // binding为指令的绑定值，可以是一个对象或表达式
    // vnode为Vue编译生成的虚拟节点
    // 可以在这里添加事件监听器或其他操作
  },
  inserted: function (el, binding, vnode) {
    // 在元素插入到父节点时执行一些操作
    // 可以在这里添加DOM操作或其他逻辑
  },
  update: function (el, binding, vnode) {
    // 在组件更新时执行一些操作
    // 可以根据binding的值来更新DOM或其他逻辑
  },
  unbind: function (el, binding, vnode) {
    // 在解绑指令时执行一些清理操作
    // 可以在这里移除事件监听器或其他操作
  }
});

// 在Vue组件中使用自定义指令
<template>
  <div>
    <input v-column-filter="columnIndex" v-model="filterText" placeholder="输入筛选条件">
    <table>
      <tr v-for="(item, index) in filteredData" :key="index">
        <td>{{ item.column1 }}</td>
        <td>{{ item.column2 }}</td>
        <td>{{ item.column3 }}</td>
        <!-- 其他列 -->
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filterText: '',
      columnIndex: 0, // 需要筛选的列索引
      data: [
        { column1: 'value1', column2: 'value2', column3: 'value3' },
        // 其他数据
      ]
    };
  },
  computed: {
    filteredData() {
      // 根据筛选条件和列索引过滤数据
      return this.data.filter(item => item[`column${this.columnIndex + 1}`].includes(this.filterText));
    }
  }
};
</script>

// 在Vue组件中使用自定义组件
<template>
  <div>
    <column-filter :column-index="0" v-model="filterText"></column-filter>
    <table>
      <tr v-for="(item, index) in filteredData" :key="index">
        <td>{{ item.column1 }}</td>
        <td>{{ item.column2 }}</td>
        <td>{{ item.column3 }}</td>
        <!-- 其他列 -->
      </tr>
    </table>
  </div>
</template>

<script>
// ColumnFilter组件
Vue.component('column-filter', {
  props: ['columnIndex', 'value'],
  template: `
    <input v-model="filterText" placeholder="输入筛选条件">
  `,
  data() {
    return {
      filterText: this.value
    };
  },
  watch: {
    filterText(newVal) {
      this.$emit('input', newVal);
    }
  }
});

export default {
  data() {
    return {
      filterText: '',
      data: [
        { column1: 'value1', column2: 'value2', column3: 'value3' },
        // 其他数据
      ]
    };
  },
  computed: {
    filteredData() {
      // 根据筛选条件和列索引过滤数据
      return this.data.filter(item => item[`column${this.columnIndex + 1}`].includes(this.filterText));
    }
  }
};
</script>