el-table 带筛选 设置筛选框尺寸 筛选框 不能输入

el-table 是 Element UI 提供的一个表格组件，可以用于展示数据。它提供了丰富的功能和配置选项，包括筛选功能。

要设置 el-table 的筛选框尺寸并且禁止输入，可以通过配置 el-table-column 的 filter-method 和 filter-input-attributes 属性来实现。

首先，设置 el-table-column 的 filter-method 属性为一个自定义的方法，该方法用于筛选数据。在该方法中，可以通过返回 true 或 false 来决定是否显示该行数据。

其次，设置 el-table-column 的 filter-input-attributes 属性为一个对象，该对象用于设置筛选框的属性。可以通过设置 disabled 属性为 true 来禁止输入。

下面是一个示例代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名" :filter-method="filterMethod" :filter-input-attributes="filterInputAttributes"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18 },
        { name: '李四', age: 20 },
        { name: '王五', age: 22 }
      ],
      filterInputAttributes: {
        disabled: true
      }
    };
  },
  methods: {
    filterMethod(value, row) {
      // 自定义筛选方法
      return row.name.indexOf(value) !== -1;
    }
  }
};
</script>

在上面的示例中，el-table-column 的 prop 属性指定了要显示的数据字段，label 属性指定了列的标题。filter-method 属性绑定了一个自定义的筛选方法 filterMethod，该方法根据输入的值和行数据进行筛选。filter-input-attributes 属性设置了筛选框的属性，其中 disabled 属性设置为 true，禁止输入。