vue easyui表格实现
Vue 与 EasyUI 表格集成方法
Vue 本身不直接支持 EasyUI，但可通过第三方库或手动集成实现。以下是两种主流方案：
方案一：使用 vue-easyui 封装库
安装官方维护的 Vue 适配版本：
npm install @jeecg/vue-easyui基础表格示例代码：
<template>
<div>
<dg-datagrid
:data="tableData"
:columns="columns"
:pagination="true"
@rowClick="handleRowClick"
></dg-datagrid>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: 'Item 1', price: 10 },
{ id: 2, name: 'Item 2', price: 20 }
],
columns: [
{ field: 'id', title: 'ID' },
{ field: 'name', title: 'Name' },
{ field: 'price', title: 'Price' }
]
}
},
methods: {
handleRowClick(row) {
console.log('Selected row:', row)
}
}
}
</script>方案二：原生 EasyUI 集成
手动引入 EasyUI 资源后通过 Vue 控制：
-
引入资源文件
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"> <script src="https://www.jeasyui.com/easyui/jquery.min.js"></script> <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> -
Vue 组件封装
<template> <div> <table id="dg" class="easyui-datagrid"></table> </div> </template>
功能扩展建议
分页控制
$('#dg').datagrid({
pagination: true,
pageSize: 20,
pageList: [10,20,50]
})动态加载数据
this.$http.get('/api/data').then(res => {
$('#dg').datagrid('loadData', res.data)
})行编辑功能
$('#dg').datagrid({
editable: true,
editMode: 'click'
})注意事项
- jQuery 版本需与 EasyUI 兼容，推荐使用 1.12.x 版本
- 动态数据更新时需手动调用
datagrid('loadData')方法 - 事件处理建议通过 Vue 的
$emit与父组件通信 - 样式冲突可通过深度选择器解决：
>>> .datagrid-header { background: #f5f5f5 }
两种方案各有优劣：方案一更适合 Vue 技术栈，方案二适合已有 EasyUI 项目的渐进式改造。实际选择应评估项目具体需求和技术兼容性。
