vue2版本的ruoyi-ui中使用vxe-table插件

ElementUI 中的 Table 不支持在表格中新增行编辑行，https://element.eleme.cn/#/zh-CN/component/table

VxeTable 的表格演示：https://vxetable.cn/v3/#/demo/crud

VxeTable 使用方法如下：https://vxetable.cn/v3/#/start/useUI/install
VxeUI 使用方法如下：https://vxeui.com/v3/#/start/useUI/install

首先在 package.json 中 的 dependencies 节点添加依赖，如下：

"xe-utils": "3.7.9",
"vxe-pc-ui": "3.9.44",
"vxe-table": "3.18.21"

然后在 main.js 中 import 导入和 Vue.use 使用插件，如下：

// 导入VxeTable组件
import VxeUIAll from 'vxe-pc-ui'
import 'vxe-pc-ui/es/style.css'
import VxeUITable from 'vxe-table'
import 'vxe-table/es/style.css'

// 使用VxeTable组件
Vue.use(VxeUIAll)
Vue.use(VxeUITable)

最后在 vue 单文件组件中使用，例如在 src/views/lbm/jobgivestd/index.vue中，如下：

<style lang="scss" scoped>
::v-deep .vue-treeselect__control {
	max-width: 400px;
	height: 300px;
}
</style>

<template>
	<div class="app-container">
		<el-form></el-form>
		<el-table></el-table>
		<pagination></pagination>
		
		<!-- 添加或修改工种发放标准对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="800px" :close-on-click-modal="false" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px"
             :label-position="labelPosition">
                <el-form-item label="归属部门" prop="DEPID">
                <treeselect v-model="form.DEPID" :options="deptOptions" :show-count="true" placeholder="请选择归属部门"
                    @select="treeSelectChange2" />
                </el-form-item>
                <!-- <el-form-item label="岗位" prop="POSTID">
                    <treeselect v-model="queryParams.POSTID" :options="postOptions" :multiple="true" :show-count="true" placeholder="请选择岗位"
                        @select="treePostSelectChange" />
                </el-form-item> -->
                <el-form-item label="岗位" prop="JOBCODES">
                    <el-select
                        style="width:400px"
                        v-model="form.JOBCODES"
                        multiple
                        filterable 
                        collapse-tags
                        placeholder="请选择">
                        <el-option
                            v-for="item in postOptions2"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- <vxe-toolbar :buttons="toolbarButtons" @button-click="buttonClickEvent"></vxe-toolbar> -->
                <vxe-toolbar>
                    <template #buttons>
                        <vxe-select v-model="jobGiveStdCode" :clearable="true" :options="jobGiveStdCodeOptions"
                            :allow-create="true" :filterable="true"
                            :placeholder="jobGiveStdSelectPlaceholder" @change="changeJobGiveStdCodeEvent"
                             style="width:240px;margin-right: 10px;"></vxe-select>
                        <vxe-button status="primary" icon="vxe-icon-add" @click="addEvent">新增</vxe-button>
                        <vxe-button status="error" icon="vxe-icon-no-drop" @click="pendingSelect(true)">标记删除</vxe-button>
                        <vxe-button status="error" icon="vxe-icon-no-drop" @click="pendingSelect(false)">取消标记</vxe-button>
                        <vxe-button status="success" icon="vxe-icon-save" @click="saveEvent">保存</vxe-button>
                    </template>
                </vxe-toolbar>
                
                <vxe-table
                    ref="tableRef"
                    border
                    show-overflow
                    :edit-config="{mode: 'row', trigger: 'click'}"
                    :data="tableData">
                    <vxe-column field="seq" type="seq" fixed="left" width="60"></vxe-column>
                    <vxe-column field="checkbox" type="checkbox" fixed="left" width="60"></vxe-column>
                    <vxe-column field="labourType" title="劳保类型" min-width="200" :edit-render="labourTypeSelectRender" :clearable="true" :filterable="true" :transfer="true"></vxe-column>
                    <vxe-column field="labour" title="劳保用品" min-width="200" :edit-render="labourSelectRender" :clearable="true" :filterable="true" :transfer="true"></vxe-column>
                    <vxe-column field="specification" title="规格" min-width="200" :edit-render="specificationInputRender"></vxe-column>
                    <vxe-column field="modelNumber" title="型号" min-width="200" :edit-render="modelNumberInputRender"></vxe-column>
                    <vxe-column field="num" title="数量" min-width="200" :edit-render="{ name: 'VxeNumberInput', props: { type: 'integer' } }"></vxe-column>
                    <vxe-column field="unit" title="单位" min-width="200" :edit-render="unitSelectRender" :clearable="true" :filterable="true" :transfer="true"></vxe-column>
                    <vxe-column field="cycle" title="周期" min-width="200" :edit-render="{ name: 'VxeNumberInput', props: { type: 'integer' } }"></vxe-column>
                </vxe-table>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
	</div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
import { VxeUI } from 'vxe-table';

export default {
	...... 省略其他代码
	created() {
		VueUI.setConfig({
			zIndex: 3000, // 全局 zIndex 起始值，如果项目的的 z-index 样式值过大时就需要跟随设置更大，避免被遮挡；新版本可以使用 dom-zindex 共享配置；解决 vxe-select 弹窗被遮挡问题
		});
	},
	...... 省略其他代码
}

</script>