gaoxing/UNIVPLMDataIntegration
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

😎调整机构管理页面vxe-table

Browse Source
This commit is contained in:
zuohuaijun 2024-07-01 00:26:53 +08:00
parent 0646a1a7f3
commit 22807ac386
3 changed files with 199 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
Web/src/views/system/org/component/orgTree.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<el-card class="box-card" shadow="hover" style="height: 100%" body-style="height:100%; overflow:auto"> <el-card class="box-card" shadow="hover" body-style="height:100%;overflow:auto;padding:5px;width:100%;">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<div class="tree-h-flex"> <div class="tree-h-flex">
<div class="tree-h-left"> <div class="tree-h-left">
<el-input :prefix-icon="Search" v-model="filterText" placeholder="机构名称" /> <el-input :prefix-icon="Search" v-model.lazy="filterText" clearable placeholder="机构名称" />
</div> </div>
<div class="tree-h-right"> <div class="tree-h-right">
<el-dropdown @command="handleCommand"> <el-dropdown @command="handleCommand">
@ -23,30 +23,33 @@
</template> </template>
</el-dropdown> </el-dropdown>
</div> </div>
<el-checkbox v-if="!props.checkStrictly && state.isShowCheckbox" v-model="state.strictly" label="联动" style="margin-left: 8px" border />
</div> </div>
</div> </div>
</template> </template>
<div style="margin-bottom: 45px" v-loading="state.loading"> <div style="margin-bottom: 45px" v-loading="state.loading">
<el-tree <el-scrollbar>
ref="treeRef" <el-tree
class="filter-tree" ref="treeRef"
:data="state.orgData" class="filter-tree"
node-key="id" :data="state.orgData"
:props="{ children: 'children', label: 'name' }" node-key="id"
:filter-node-method="filterNode" :props="{ children: 'children', label: 'name' }"
@node-click="nodeClick" :filter-node-method="filterNode"
:show-checkbox="state.isShowCheckbox" @node-click="nodeClick"
:default-checked-keys="state.ownOrgData" :show-checkbox="state.isShowCheckbox"
highlight-current :default-checked-keys="state.ownOrgData"
check-strictly highlight-current
> :check-strictly="!state.strictly"
<template #default="{ node }"> >
<el-icon v-if="node.level == 1" size="16" style="margin-right: 3px; display: inline; vertical-align: middle"><ele-School /></el-icon> <template #default="{ node }">
<el-icon v-else-if="node.level == 2" size="16" style="margin-right: 3px; display: inline; vertical-align: middle"><ele-PriceTag /></el-icon> <el-icon v-if="node.level == 1" size="16" style="margin-right: 3px; display: inline; vertical-align: middle"><ele-School /></el-icon>
<el-icon v-else size="16" style="margin-right: 3px; display: inline; vertical-align: middle"><ele-CollectionTag /></el-icon> <el-icon v-else-if="node.level == 2" size="16" style="margin-right: 3px; display: inline; vertical-align: middle"><ele-PriceTag /></el-icon>
{{ node.label }} <el-icon v-else size="16" style="margin-right: 3px; display: inline; vertical-align: middle"><ele-CollectionTag /></el-icon>
</template> {{ node.label }}
</el-tree> </template>
</el-tree>
</el-scrollbar>
</div> </div>
</el-card> </el-card>
</template> </template>
@ -59,6 +62,11 @@ import { Search, MoreFilled } from '@element-plus/icons-vue';
import { getAPI } from '/@/utils/axios-utils'; import { getAPI } from '/@/utils/axios-utils';
import { SysOrgApi } from '/@/api-services/api'; import { SysOrgApi } from '/@/api-services/api';
import { SysOrg } from '/@/api-services/models'; import { SysOrg } from '/@/api-services/models';
import { TreeKey } from 'element-plus/es/components/tree/src/tree.type';
const props = defineProps({
checkStrictly: { type: Boolean, defaul: true },
});
const filterText = ref(''); const filterText = ref('');
const treeRef = ref<InstanceType<typeof ElTree>>(); const treeRef = ref<InstanceType<typeof ElTree>>();
@ -67,21 +75,26 @@ const state = reactive({
orgData: [] as Array<SysOrg>, orgData: [] as Array<SysOrg>,
isShowCheckbox: false, isShowCheckbox: false,
ownOrgData: [], ownOrgData: [],
strictly: false,
}); });
onMounted(() => { // 页面初始化
initTreeData(); onMounted(async () => {
await fetchTreeData();
}); });
// 查询监听
watch(filterText, (val) => { watch(filterText, (val) => {
treeRef.value!.filter(val); treeRef.value!.filter(val);
}); });
const initTreeData = async () => { // 获取树数据
state.loading = true; const fetchTreeData = async (showLoading: boolean = true) => {
if (showLoading) state.loading = true;
var res = await getAPI(SysOrgApi).apiSysOrgListGet(0); var res = await getAPI(SysOrgApi).apiSysOrgListGet(0);
state.orgData = res.data.result ?? []; state.orgData = res.data.result ?? [];
state.loading = false; if (showLoading) state.loading = false;
return res.data.result ?? [];
}; };
// 设置默认选择 // 设置默认选择
@ -96,11 +109,13 @@ const getCheckedKeys = () => {
return treeRef.value!.getCheckedKeys(); return treeRef.value!.getCheckedKeys();
}; };
// 节点过滤
const filterNode = (value: string, data: any) => { const filterNode = (value: string, data: any) => {
if (!value) return true; if (!value) return true;
return data.name.includes(value); return data.name.includes(value);
}; };
// 节点操作
const handleCommand = async (command: string | number | object) => { const handleCommand = async (command: string | number | object) => {
if ('expandAll' == command) { if ('expandAll' == command) {
for (let i = 0; i < treeRef.value!.store._getAllNodes().length; i++) { for (let i = 0; i < treeRef.value!.store._getAllNodes().length; i++) {
@ -111,8 +126,9 @@ const handleCommand = async (command: string | number | object) => {
treeRef.value!.store._getAllNodes()[i].expanded = false; treeRef.value!.store._getAllNodes()[i].expanded = false;
} }
} else if ('refresh' == command) { } else if ('refresh' == command) {
initTreeData(); fetchTreeData();
} else if ('rootNode' == command) { } else if ('rootNode' == command) {
treeRef.value?.setCurrentKey();
emits('node-click', { id: 0, name: '' }); emits('node-click', { id: 0, name: '' });
} }
}; };
@ -123,11 +139,22 @@ const nodeClick = (node: any) => {
emits('node-click', { id: node.id, name: node.name }); emits('node-click', { id: node.id, name: node.name });
}; };
//设置当前选中节点
const setCurrentKey = (key?: TreeKey | undefined, shouldAutoExpandParent?: boolean | undefined) => {
treeRef.value?.setCurrentKey(key, shouldAutoExpandParent);
};
// 导出对象 // 导出对象
defineExpose({ initTreeData, setCheckedKeys, getCheckedKeys }); defineExpose({ fetchTreeData, setCheckedKeys, getCheckedKeys, setCurrentKey });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.box-card {
flex: 1;
> :deep(.el-card__header) {
padding: 5px;
}
}
.tree-h-flex { .tree-h-flex {
display: flex; display: flex;
} }

222
Web/src/views/system/org/index.vue
View File

@ -1,145 +1,193 @@
<template> <template>
<div class="sys-org-container"> <div class="sys-org-container" v-loading="options.loading">
<el-row :gutter="5" style="width: 100%; flex: 1"> <el-row :gutter="5" style="width: 100%; height: 100%">
<el-col :span="4" :xs="24"> <el-col :span="4" :xs="24" style="display: flex; height: 100%">
<OrgTree ref="orgTreeRef" @node-click="nodeClick" /> <OrgTree ref="orgTreeRef" @node-click="handleNodeChange" />
</el-col> </el-col>
<el-col :span="20" :xs="24" style="display: flex; flex-direction: column"> <el-col :span="20" :xs="24" style="display: flex; flex-direction: column; height: 100%">
<el-card shadow="hover" :body-style="{ paddingBottom: '0' }"> <el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
<el-form :model="state.queryParams" ref="queryForm" :inline="true"> <el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" :label-width="'60px'" style="flex: 1 1 0%">
<el-form-item label="机构名称"> <el-row :gutter="10">
<el-input v-model="state.queryParams.name" placeholder="机构名称" clearable /> <el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
</el-form-item> <el-form-item label="机构名称" prop="name">
<!-- <el-form-item label="机构编码"> <el-input v-model="state.queryParams.name" placeholder="机构名称" clearable @keyup.enter.native="handleQuery" />
<el-input v-model="state.queryParams.code" placeholder="机构编码" clearable /> </el-form-item>
</el-form-item> --> </el-col>
<el-form-item label="机构类型"> <el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-select v-model="state.queryParams.type" filterable clearable> <el-form-item label="机构编码" prop="code">
<el-option v-for="item in state.orgTypeList" :key="item.value" :label="item.value" :value="item.code" /> <el-input v-model="state.queryParams.code" placeholder="机构编码" clearable @keyup.enter.native="handleQuery" />
</el-select> </el-form-item>
</el-form-item> </el-col>
<el-form-item> <el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-button-group> <el-form-item label="机构类型" prop="type">
<el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询 </el-button> <el-select v-model="state.queryParams.type" filterable clearable class="w100" @clear="state.queryParams.type = undefined">
<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button> <el-option v-for="item in state.orgTypeList" :key="item.value" :label="item.value" :value="item.code" />
</el-button-group> </el-select>
</el-form-item> </el-form-item>
<el-form-item> </el-col>
<el-button type="primary" icon="ele-Plus" @click="openAddOrg" v-auth="'sysOrg:add'"> 新增 </el-button> </el-row>
</el-form-item>
</el-form> </el-form>
<el-divider style="height: calc(100% - 5px); margin: 0 10px" direction="vertical" />
<el-row>
<el-col>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery" :loading="options.loading"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
</el-button-group>
</el-col>
</el-row>
</el-card> </el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px"> <el-card class="full-table" shadow="hover" style="margin-top: 5px; flex: 1">
<el-table :data="state.orgData" style="width: 100%" v-loading="state.loading" row-key="id" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border> <vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" :tree-config="{}">
<el-table-column prop="name" label="机构名称" min-width="160" header-align="center" show-overflow-tooltip /> <template #toolbar_buttons>
<el-table-column prop="code" label="机构编码" align="center" show-overflow-tooltip /> <el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'sysOrg:add'"> 新增 </el-button>
<el-table-column prop="level" label="级别" width="70" align="center" show-overflow-tooltip /> <el-button-group style="padding-left: 12px">
<el-table-column prop="type" label="机构类型" align="center" :formatter="dictFormatter" show-overflow-tooltip /> <el-button type="primary" icon="ele-Expand" @click="handleExpand"> 全部展开 </el-button>
<el-table-column prop="orderNo" label="排序" width="70" align="center" show-overflow-tooltip /> <el-button type="primary" icon="ele-Fold" @click="handleFold"> 全部折叠 </el-button>
<el-table-column label="状态" width="70" align="center" show-overflow-tooltip> </el-button-group>
<template #default="scope"> </template>
<el-tag type="success" v-if="scope.row.status === 1">启用</el-tag> <template #toolbar_tools> </template>
<el-tag type="danger" v-else>禁用</el-tag> <template #empty>
</template> <el-empty :image-size="200" />
</el-table-column> </template>
<el-table-column label="修改记录" width="100" align="center" show-overflow-tooltip> <template #row_status="{ row }">
<template #default="scope"> <el-tag v-if="row.status === 1" type="success">启用</el-tag>
<ModifyRecord :data="scope.row" /> <el-tag v-else type="danger">禁用</el-tag>
</template> </template>
</el-table-column> <template #row_record="{ row }">
<el-table-column label="操作" width="140" fixed="right" align="center" show-overflow-tooltip> <ModifyRecord :data="row" />
<template #default="scope"> </template>
<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditOrg(scope.row)" v-auth="'sysOrg:update'"> 编辑 </el-button> <template #row_buttons="{ row }">
<el-button icon="ele-Delete" size="small" text type="danger" @click="delOrg(scope.row)" v-auth="'sysOrg:delete'"> 删除 </el-button> <el-tooltip content="编辑" placement="top">
</template> <el-button icon="ele-Edit" size="small" text type="primary" @click="handleEdit(row)" v-auth="'sysOrg:update'"></el-button>
</el-table-column> </el-tooltip>
</el-table> <el-tooltip content="删除" placement="top">
<el-button icon="ele-Delete" size="small" text type="danger" @click="handleDelete(row)" v-auth="'sysOrg:delete'"></el-button>
</el-tooltip>
</template>
</vxe-grid>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
<EditOrg ref="editOrgRef" :title="state.editOrgTitle" :orgData="state.orgTreeData" @handleQuery="handleQuery" /> <EditOrg ref="editOrgRef" :title="state.title" :orgData="state.treeData" @reload="handleQuery" />
</div> </div>
</template> </template>
<script lang="ts" setup name="sysOrg"> <script lang="ts" setup name="sysOrg">
import { onMounted, reactive, ref } from 'vue'; import { onMounted, reactive, ref, nextTick } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus'; import { ElMessageBox, ElMessage } from 'element-plus';
import { auth } from '/@/utils/authFunction';
import { VxeGridInstance } from 'vxe-table';
import { useVxeTable } from '/@/hooks/vxeTableOptionsHook';
import OrgTree from '/@/views/system/org/component/orgTree.vue'; import OrgTree from '/@/views/system/org/component/orgTree.vue';
import EditOrg from '/@/views/system/org/component/editOrg.vue'; import EditOrg from '/@/views/system/org/component/editOrg.vue';
import ModifyRecord from '/@/components/table/modifyRecord.vue'; import ModifyRecord from '/@/components/table/modifyRecord.vue';
import { getAPI } from '/@/utils/axios-utils'; import { getAPI } from '/@/utils/axios-utils';
import { SysOrgApi, SysDictDataApi } from '/@/api-services/api'; import { SysDictDataApi, SysOrgApi } from '/@/api-services';
import { SysOrg } from '/@/api-services/models'; import { SysOrg } from '/@/api-services/models';
const xGrid = ref<VxeGridInstance>();
const editOrgRef = ref<InstanceType<typeof EditOrg>>(); const editOrgRef = ref<InstanceType<typeof EditOrg>>();
const orgTreeRef = ref<InstanceType<typeof OrgTree>>(); const orgTreeRef = ref<InstanceType<typeof OrgTree>>();
const state = reactive({ const state = reactive({
loading: false, treeData: [] as Array<SysOrg>, // 机构树所有数据
orgData: [] as Array<SysOrg>, // 机构列表数据
orgTreeData: [] as Array<SysOrg>, // 机构树所有数据
queryParams: { queryParams: {
id: 0, id: 0,
name: undefined, name: undefined,
code: undefined, code: undefined,
type: undefined, type: undefined,
}, },
editOrgTitle: '', title: '',
orgTypeList: [] as any, orgTypeList: [] as any,
}); });
onMounted(async () => { // 表格参数配置
handleQuery(); const options = useVxeTable<SysOrg>(
{
id: 'sysOrg',
name: '机构',
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'name', title: '机构名称', minWidth: 200, showOverflow: 'tooltip', treeNode: true },
{ field: 'code', title: '机构编码', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'level', title: '级别', minWidth: 70, showOverflow: 'tooltip' },
{ field: 'type', title: '机构类型', minWidth: 80, formatter: ({ cellValue }: any) => state.orgTypeList.find((u: any) => u.code == cellValue)?.value, showOverflow: 'tooltip' },
{ field: 'orderNo', title: '排序', width: 80, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', width: 80, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
],
enableExport: auth('sysOrg:export'),
searchCallback: () => handleQuery(),
queryAllCallback: () => fetchData({ pageSize: 99999 }),
},
{ stripe: false, checkboxConfig: { range: false } }
);
// 页面初始化
onMounted(async () => {
await handleQuery();
let resDicData = await getAPI(SysDictDataApi).apiSysDictDataDataListCodeGet('org_type'); let resDicData = await getAPI(SysDictDataApi).apiSysDictDataDataListCodeGet('org_type');
state.orgTypeList = resDicData.data.result; state.orgTypeList = resDicData.data.result;
// 展开表格所有数据，数据量大时请勿开启
nextTick(async () => {
if (state.treeData?.length < 100) await xGrid.value?.setAllTreeExpand(true);
});
}); });
// 查询操作 // 查询操作
const handleQuery = async (updateTree: boolean = false) => { const handleQuery = async (updateTree: boolean = false) => {
state.loading = true; options.loading = true;
var res = await getAPI(SysOrgApi).apiSysOrgListGet(state.queryParams.id, state.queryParams.name, state.queryParams.code, state.queryParams.type); var res = await fetchData(null);
state.orgData = res.data.result ?? []; xGrid.value?.loadData(res.data.result ?? []);
state.loading = false; options.loading = false;
// 是否更新左侧机构列表树 // 是否更新左侧机构列表树
if (updateTree == true) { if (updateTree == true) {
orgTreeRef.value?.initTreeData(); const data = await orgTreeRef.value?.fetchTreeData();
// 更新编辑页面机构列表树 state.treeData = data ?? [];
var res = await getAPI(SysOrgApi).apiSysOrgListGet(0);
state.orgTreeData = res.data.result ?? [];
} }
// 若无选择节点并且查询条件为空时，更新编辑页面机构列表树 // 若无选择节点并且查询条件为空时，更新编辑页面机构列表树
if (state.queryParams.id == 0 && state.queryParams.name == undefined && state.queryParams.code == undefined && state.queryParams.type == undefined && updateTree == false) if (state.queryParams.id == 0 && state.queryParams.name == undefined && state.queryParams.code == undefined && state.queryParams.type == undefined && updateTree == false)
state.orgTreeData = state.orgData; state.treeData = res.data.result ?? [];
};
// 获取表数据
const fetchData = async (tableParams: any) => {
let params = Object.assign(state.queryParams, tableParams);
return getAPI(SysOrgApi).apiSysOrgListGet(params.id, params.name, params.code, params.type);
}; };
// 重置操作 // 重置操作
const resetQuery = () => { const resetQuery = async () => {
state.queryParams.id = 0; state.queryParams.id = 0;
state.queryParams.name = undefined; state.queryParams.name = undefined;
state.queryParams.code = undefined; state.queryParams.code = undefined;
state.queryParams.type = undefined; state.queryParams.type = undefined;
handleQuery(); await handleQuery();
}; };
// 打开新增页面 // 打开新增页面
const openAddOrg = () => { const handleAdd = () => {
state.editOrgTitle = '添加机构'; state.title = '添加机构';
editOrgRef.value?.openDialog({ status: 1, orderNo: 100 }); editOrgRef.value?.openDialog({ status: 1, orderNo: 100 });
}; };
// 打开编辑页面 // 打开编辑页面
const openEditOrg = (row: any) => { const handleEdit = (row: any) => {
state.editOrgTitle = '编辑机构'; state.title = '编辑机构';
editOrgRef.value?.openDialog(row); editOrgRef.value?.openDialog(row);
}; };
// 删除 // 删除
const delOrg = (row: any) => { const handleDelete = (row: any) => {
ElMessageBox.confirm(`确定删除机构：【${row.name}】?`, '提示', { ElMessageBox.confirm(`确定删除机构：【${row.name}】?`, '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
@ -148,22 +196,28 @@ const delOrg = (row: any) => {
.then(async () => { .then(async () => {
await getAPI(SysOrgApi).apiSysOrgDeletePost({ id: row.id }); await getAPI(SysOrgApi).apiSysOrgDeletePost({ id: row.id });
ElMessage.success('删除成功'); ElMessage.success('删除成功');
handleQuery(true); await handleQuery(true);
}) })
.catch(() => {}); .catch(() => {});
}; };
// 树组件点击 // 树组件点击
const nodeClick = async (node: any) => { const handleNodeChange = async (node: any) => {
state.queryParams.id = node.id; state.queryParams.id = node.id;
state.queryParams.name = undefined; state.queryParams.name = undefined;
state.queryParams.code = undefined; state.queryParams.code = undefined;
state.queryParams.type = undefined; state.queryParams.type = undefined;
handleQuery(); orgTreeRef?.value?.setCurrentKey();
await handleQuery();
}; };
// 字典转换 // 全部展开
const dictFormatter = (row: any, column: any, cellValue: any) => { const handleExpand = () => {
return state.orgTypeList.find((u: any) => u.code == cellValue)?.value; xGrid.value?.setAllTreeExpand(true);
};
// 全部折叠
const handleFold = () => {
xGrid.value?.clearTreeExpand();
}; };
</script> </script>

9
Web/src/views/system/pos/index.vue
View File

@ -99,6 +99,7 @@ const state = reactive({
visible: false, visible: false,
title: '', title: '',
}); });
//表格参数配置 //表格参数配置
const options = useVxeTable<PosOutput>({ const options = useVxeTable<PosOutput>({
id: 'sysPos', id: 'sysPos',
@ -106,10 +107,10 @@ const options = useVxeTable<PosOutput>({
columns: [ columns: [
// { type: 'checkbox', width: 40, fixed: 'left' }, // { type: 'checkbox', width: 40, fixed: 'left' },
{ type: 'seq', title: '序号', width: 60, fixed: 'left' }, { type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'name', title: '职位名称', minWidth: 200, showOverflow: 'tooltip', sortable: true }, { field: 'name', title: '职位名称', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'code', title: '职位编码', minWidth: 200, showOverflow: 'tooltip', sortable: true }, { field: 'code', title: '职位编码', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'orderNo', title: '排序', width: 80, showOverflow: 'tooltip', sortable: true }, { field: 'orderNo', title: '排序', width: 80, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', width: 80, showOverflow: 'tooltip', sortable: true, slots: { default: 'row_status' } }, { field: 'status', title: '状态', width: 80, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } }, { field: '', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } }, { title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
], ],