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 控制：

1. 引入资源文件

   <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>

2. Vue 组件封装

   

   
   <template>
   <div>
    <table id="dg" class="easyui-datagrid"></table>
   </div>
   </template>

export default { mounted() { $('#dg').datagrid({ url: '/api/data', columns: [[ { field: 'code', title: 'Code', width: 100 }, { field: 'name', title: 'Name', width: 100 } ]], onSelect: (index, row) => { this.$emit('row-select', row) } }) }, methods: { reload() { $('#dg').datagrid('reload') } } } ```

功能扩展建议

分页控制

$('#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'
})

注意事项

1. jQuery 版本需与 EasyUI 兼容，推荐使用 1.12.x 版本
2. 动态数据更新时需手动调用 datagrid('loadData') 方法
3. 事件处理建议通过 Vue 的 $emit 与父组件通信
4. 样式冲突可通过深度选择器解决：

   >>> .datagrid-header { background: #f5f5f5 }

两种方案各有优劣：方案一更适合 Vue 技术栈，方案二适合已有 EasyUI 项目的渐进式改造。实际选择应评估项目具体需求和技术兼容性。