父组件
<el-main v-loading="loading">
<my-table
:data="tyData" //表格数据
@selectionchange="selectionchange" //复选框多选
@getTableData="getdata" //获取列表数据
@showdialog="showdialog" //打开弹框
@editpro="editpro" //启动编辑
@selectAll="selectionAll" //全选
@handleRowClick="handleRowClick" //无复选框时单选
ref="districtTable"
>
//插槽
<template slot="operation" slot-scope="{row, $index}">
<p>编辑</p>
</template>
</my-table>
</el-main>
子组件
<vxe-table
border
resizable
show-overflow
keep-source
ref="table_tree"
show-header-overflow
:max-height="tableMaxHeight"
:data="data.tableData"
:edit-config="data.isedit ? {trigger: 'click', mode: 'cell', showIcon: false} : {showIcon: false}"
:checkbox-config="{checkStrictly: checkStrictly, showHeader: true}"
@edit-actived="editDisabledEvent"
@checkbox-all="checkboxAll"
@checkbox-change="handleSelectionChange"
@radio-change="handleRowClick"
:tree-config="data.isTree ? {transform: true, rowField: 'Keyoid', parentField: 'parentId', expandAll: true} : {}"
@toggle-tree-expand="toggleExpandChangeEvent"
:custom-config="{storage: true}"
:column-config="{isCurrent: true, isHover: true, resizable: true}"
:row-config="{isCurrent: true, isHover: true}"
:column-key="true"
id="fk_table"
@resizable-change="resizableChange"
class="mytable-scrollbar"
@custom="toolbarCustomEvent"
:scroll-y="{mode: 'wheel'}"
:scroll-x="{gt: 10}"
@current-change="handleRowClick"
:header-cell-style="headerCellStyle"
:cell-style="cellStyle"
:row-style="rowStyle"
>
<vxe-column type="checkbox" width="60" v-if="data.selection" fixed="left"></vxe-column>
<vxe-column
v-for="(col, index) in data.column"
:key="index"
:field="col.prop"
:title="col.label"
:align="col.align || 'center'"
:width="col.width"
:fixed="col.fixed ? 'left' : ''"
:min-width="col.minWidth"
:edit-render="{}"
:show-header-overflow="col.showOverflowTooltip"
:sortable="col.sortable ? col.sortable : false"
:resizable="true"
v-if="col.isShow"
:tree-node="index === 0"
>
<template #default="{ row }">
<p
class="p_word"
v-html="showData(col.prop, row[col.prop], row)"
@click="showdialog(row, col)"
:class="{blue: col.type == 'dialog'}"
></p>
</template>
<template #edit="{ row }">
<slot v-if="col.slot" :name="col.prop" :row="row"></slot>
<div v-else>
<el-input
v-if="col.type == 'input'"
v-model="row[col.prop]"
@input="
val => {
integerValue(row, col.prop, val);
}
"
type="text"
:disabled="col.disabled"
style="width:100%;padding:2px"
></el-input>
</div>
</template>
</vxe-column>
<vxe-column title="操作" min-width="100" v-if="data.operation" fixed="right">
<template #default="{ row }">
<slot name="operation" :row="row"></slot>
</template>
</vxe-column>
</vxe-table>
子组件方法详解
vxe-table文档 https://xuliangzhan_admin.gitee.io/vxe-table/#/table/api
1.列拖动
安装sortablejs,并在子组件引入
import Sortable from 'sortablejs'
实现
mounted() {
this.columnDrop1();
},
//列拖动
columnDrop1() {
this.$nextTick(() => {
let xTable = this.$refs.table_tree;
this.sortable = Sortable.create(
xTable.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row'),
{
handle: '.vxe-header--column',
onEnd: ({newIndex, oldIndex}) => {
console.log(newIndex, oldIndex);
let tableColumn = xTable.getColumns();
let currRow = tableColumn.splice(oldIndex, 1)[0];
tableColumn.splice(newIndex, 0, currRow);
xTable.loadColumn(tableColumn);
//此处可根据实际需求写
}
}
);
});
},
2.列宽改变
在vxe-table标签设置
:custom-config="{storage: true}"
:column-config="{isCurrent: true, isHover: true, resizable: true}"
@resizable-change="resizableChange"
方法调用
//列宽改变
resizableChange({$rowIndex, column, columnIndex, $columnIndex, $event}) {
console.log($rowIndex, column, columnIndex, $columnIndex, $event);
},
3.样式设置
https://xuliangzhan_admin.gitee.io/vxe-table/#/table/base/style 文档详细描述