怎样安装
在你的项目中执行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()找表数据