vxe-grid hidecolumn

vxe-grid hidecolumn是一个vue组件中的一个功能，用于隐藏表格中的列。在使用vxe-grid组件进行表格渲染时，我们可以通过hidecolumn属性来指定哪些列需要被隐藏，达到定制表格显示效果的目的。

使用hidecolumn功能也十分简单，只需要在vxe-grid标签中添加hidecolumn属性，属性值为一个数组，数组中每个元素代表一个需要隐藏的列的field字段名即可。例如：

<vxe-grid :columns="columns" :data="gridData" :height="400" highlight-current-row stripe show-header resizable :hidecolumn="['age', 'address']"></vxe-grid>

上述代码中，hidecolumn属性指定了需要隐藏两列，分别是列名为age和address的列。

总之，vxe-grid hidecolumn提供了非常便捷的方式来隐藏表格中的列，对于定制表格显示效果非常有用。

相关问题

vxe-table中vxe-grid查询

在vxe-table中，可以使用vxe-grid组件进行查询操作。具体步骤如下：

1. 在表格中添加vxe-grid组件，并设置其属性和事件。

<vxe-grid ref="grid" :columns="columns" :data="tableData" @query-change="handleQueryChange"></vxe-grid>

其中，columns为表格列的配置，tableData为表格数据，query-change为查询条件改变时的回调函数。

2. 在回调函数中获取查询条件，并根据条件过滤表格数据。

methods: {
  handleQueryChange ({ column, cell, row, rowIndex, $rowIndex, columnIndex, $columnIndex, filters, form }) {
    const { $table } = this.$refs.grid
    const { visibleData } = $table
    const filterList = []
    for (const key in filters) {
      const filter = filters[key]
      if (filter && filter.length) {
        filterList.push({ field: key, value: filter[0].value })
      }
    }
    const filterMethod = ({ row }) => {
      return filterList.every(({ field, value }) => {
        return row[field] === value
      })
    }
    $table.loadData(visibleData.filter(filterMethod))
  }
}

其中，通过解构赋值获取查询条件，然后根据条件过滤表格数据，并重新加载数据。

3. 在表格中添加查询条件的输入框。

<vxe-toolbar>
  <vxe-form ref="form" :model.sync="queryForm" :rules="queryRules" :inline="true">
    <vxe-form-item label="名称" prop="name">
      <vxe-input v-model="queryForm.name" clearable></vxe-input>
    </vxe-form-item>
    <vxe-form-item label="年龄" prop="age">
      <vxe-input v-model="queryForm.age" clearable></vxe-input>
    </vxe-form-item>
    <vxe-form-item>
      <vxe-button type="primary" @click="$refs.grid.commitProxy('query')">查询</vxe-button>
      <vxe-button @click="$refs.grid.commitProxy('reset')">重置</vxe-button>
    </vxe-form-item>
  </vxe-form>
</vxe-toolbar>

其中，queryForm为查询条件的数据模型，queryRules为查询条件的校验规则，$refs.grid.commitProxy('query')为触发查询操作的方法，$refs.grid.commitProxy('reset')为触发重置操作的方法。

我想在vxe-grid的表头中的每一列中放置一个输入框用于进行该列数据的过滤筛选,我应该怎么配置vxe-grid, 对了,我使用的vxe-grid的版本是V2+ 2.11.0 ,

你可以使用 VXE-Table 的 filter-render 配置项来实现该功能。你可以在表头的每一列中插入一个自定义渲染器，这个渲染器是一个输入框，用于过滤筛选该列数据。下面是一个示例代码：

<vxe-table :data="tableData" :columns="columns">
  <template #filter-name="{ column }">
    <input v-model="column.filterValue" placeholder="请输入过滤条件" @input="handleFilterChange(column)" />
  </template>
</vxe-table>

在上面的代码中，我们给表格组件传递了一个 columns 配置项，其中每一列都有一个 filter-render 配置项，用于指定该列的自定义渲染器。在模板中，我们使用了这个自定义渲染器，并将输入框绑定到该列的 filterValue 属性上，同时监听输入框的 input 事件，并调用 handleFilterChange 方法来处理过滤条件的改变。

export default {
  data () {
    return {
      tableData: [],
      columns: [
        {
          title: '姓名',
          key: 'name',
          filterRender: ({ column }) => {
            return {
              render () {
                return (
                  <input v-model={column.filterValue} placeholder="请输入姓名" onInput={() => this.handleFilterChange(column)} />
                )
              }
            }
          }
        },
        {
          title: '年龄',
          key: 'age',
          filterRender: ({ column }) => {
            return {
              render () {
                return (
                  <input v-model={column.filterValue} placeholder="请输入年龄" onInput={() => this.handleFilterChange(column)} />
                )
              }
            }
          }
        },
        {
          title: '地址',
          key: 'address',
          filterRender: ({ column }) => {
            return {
              render () {
                return (
                  <input v-model={column.filterValue} placeholder="请输入地址" onInput={() => this.handleFilterChange(column)} />
                )
              }
            }
          }
        }
      ]
    }
  },
  methods: {
    handleFilterChange (column) {
      this.$refs.grid.filter(column.property, column.filterValue)
    }
  }
}

在上面的代码中，我们使用了 filter-render 配置项来定义每一列的过滤器渲染器，其中 render 方法返回一个对象，这个对象包含了一个 render 方法，用于渲染输入框。我们还定义了一个 handleFilterChange 方法，用于处理输入框内容的改变，该方法会调用 $refs.grid.filter 方法来对表格数据进行过滤筛选。

需要注意的是，filterValue 属性是通过 v-model 双向绑定的方式绑定到输入框上的，因此在输入框中输入的内容会自动同步到该属性中。同时，我们还监听了输入框的 input 事件，以便在输入框内容发生改变时及时更新过滤条件。

以上是基于 VXE-Table v2.11.0 版本的示例代码，你可以根据自己的实际情况进行调整。