vxe-table 一个pc端表格组件库

怎样安装

在你的项目中执行npm install xe-utils vxe-table@next

把vxe-table进行全局安装 main.js引入

这些在vxe-table官方API有详细记载

大概是这些

import 'xe-utils';
import VXETable from 'vxe-table';
import 'vxe-table/lib/style.css';
import VXETablePluginElement from 'vxe-table-plugin-element';
import 'vxe-table-plugin-element/dist/style.css';
Vue.use(VXETable);
VXETable.use(VXETablePluginElement);

解决在项目中的vxe-table的下拉框层级问题

遇到一个问题 在table中的下拉框 层级太低 显示不出来

deep穿透或者是各种层级调整都不太好用

可以这样试试 在引入的地方修改层级~

// 全局默认参数
VXETable.setup({
  version: 0,
  zIndex: 12345,
  table: {
    autoResize: true
  }
});
Vue.use(VXETable);

禁止多选框参与行事件

@cell-click="cellClickEvent"
cellClickEvent({row,column}) {
  // 通过判断选中元素的类型做判断
 //  column.type=="checkbox"
},

改头部的icon

通过 tooltip-config.showAll 开启全表工具提示，还可以配合 contentMethod 方法重写默认的提示内容，显示逻辑完全自定义控制，可以返回 null 使用默认的提示消息
还可以设置 tooltip-config.enterable 允许鼠标进入 tooltip 中，通过 title-help 设置列标题的帮助提示消息

 <vxe-column title="操作" :title-help="{icon:'vxe-icon-setting'}"></vxe-column>

示范：

:title-help="{message: '自定义图标', icon: 'vxe-icon-question-circle-fill'}"

table一些常用的API

点击触发 :edit-config="{ trigger: 'click', mode: 'cell', activeMethod: editActivedEvent }"

edit-config:可编辑配置项={
	trigger:触发方式,
	mode:编辑模式, //cell（单元格编辑模式）,row（行编辑模式）
	activeMethod:该方法的返回值用来决定该单元格是否允许编辑
}

@edit-closed="saveEvent" 只对 edit-config 配置时有效，单元格编辑状态下被关闭时会触发该事件
因为vxe的数据不同步 我们可以通过这个方法同步一下值
getTableData()获取当前表格的数据（完整的全量表体数据、处理条件之后的全量表体数据、当前渲染中的表体数据、当前渲染中的表尾数据）

saveEvent(index) {
      const $table = this.$refs.xTable
      // 获取表数据
      this.tableData[index].list = $table.getTableData().tableData;
    },
    //输出$table.getTableData()找表数据