vxe-table中vxe-grid鼠标移入显示位置

vxe-table 是一个基于 Vue.js 的开源表格组件，其中的 vxe-grid 组件支持鼠标移入显示位置。具体实现方式是通过配置 tooltipConfig 属性来设置鼠标移入后的显示位置，可以设置为 left、right、top、bottom 等位置。示例代码如下：

<vxe-grid
  :data="tableData"
  :tooltip-config="{enterable: true, theme: 'dark', trigger: 'hover', content: ({row, column}) => row[column.property]}"
>
  <vxe-column type="seq" width="60"></vxe-column>
  <vxe-column field="name" title="Name"></vxe-column>
  <vxe-column field="age" title="Age"></vxe-column>
</vxe-grid>

在这个例子中，tooltipConfig 属性被设置为一个函数，函数的参数包括当前的行和列信息，返回值为鼠标移入后显示的内容。此外，enterable 属性设置为 true 表示鼠标移入提示框内时依然可以触发该提示框的事件，theme 属性设置提示框的主题，trigger 属性设置触发提示框的方式为 hover，即鼠标悬浮时触发。

相关问题

vxe-table中vxe-grid鼠标移入显示位置参数

在vxe-table中，可以通过设置tooltipConfig参数来实现鼠标移入时的显示位置配置。其中，tooltipConfig是一个对象，它包含以下属性：
- theme：字符串类型，表示提示框的样式风格，默认值为“dark”。
- enterable：布尔类型，表示提示框是否可进入，默认值为false。
- leaveDelay：数字类型，表示提示框离开延迟时间，单位为毫秒，默认值为300。
- content：函数类型，表示提示框的内容生成函数，该函数返回一个字符串类型的值。

具体来说，在vxe-grid中，可以通过设置grid.tooltipConfig参数来配置鼠标移入时的显示位置。例如：

<template>
  <vxe-grid
    ...
    :tooltip-config="tooltipConfig"
    ...
  ></vxe-grid>
</template>

<script>
export default {
  data() {
    return {
      tooltipConfig: {
        theme: 'light',
        enterable: true,
        leaveDelay: 1000,
        content({row, column, cell}) {
          return `单元格的值为：${cell.value}`;
        }
      }
    }
  }
}
</script>

在上述示例中，当鼠标移动到单元格上时，会显示一个提示框，提示框的样式风格为“light”，可以进入提示框，离开提示框的延迟时间为1秒，提示框的内容是单元格的值。

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')为触发重置操作的方法。