当前位置：首页 > news >正文

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

news 2025/10/18 5:47:26

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-selectstyle="width:400px"v-model="form.JOBCODES"multiplefilterable collapse-tagsplaceholder="请选择"><el-optionv-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-tableref="tableRef"bordershow-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>