jeecg boot 框架学习 — 列表页面解析table标签

1. 开发步骤

1. 引入组件import {JeecgListMixin} from '@/mixins/JeecgListMixin'并放入公共组件mixin中

   import { JeecgListMixin } from '@/mixins/JeecgListMixin'
   export default {
      name: "CustomerList",
      mixins:[JeecgListMixin],
      components: {
        JDate,
        CustomerModal,
        JDictSelectTag
      },
      ...
   }
   

2. 修改组件名称

   export default {
      name: "CustomerList",
      ...
   }
   

3. 设置table的列属性并绑定到table上

   data () {
     return {
       ....
       // 表头,定义table数据
       columns: [
         {
           title: '#',
           dataIndex: '',
           key:'rowIndex',
           width:60,
           align:"center",
           customRender:function (t,r,index) {
             return parseInt(index)+1;
           }
         },
         {
           title:'客户编号',
           align:"center",
           dataIndex: 'customerNo'
         },
         {
           title:'客户名称',
           align:"center",
           dataIndex: 'name'
         },
         {
           title:'类型',
           align:"center",
           dataIndex: 'type1Id_dictText',
         },
   ...
   }
   

   <a-table
       ref="table"
       size="middle"
       bordered
       rowKey="id"
       :columns="columns" // 绑定列表列数据
       :dataSource="dataSource"
       :pagination="ipagination"
       :loading="loading"
       :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
       @change="handleTableChange">
   </a-table>
   

4. 设置JeecgListMixin需要的url

url: {
  list: "/crm/customer/list",
  delete: "/crm/customer/delete",
  deleteBatch: "/crm/customer/deleteBatch",
  exportXlsUrl: "/crm/customer/exportXls",
  importExcelUrl: "crm/customer/importExcel",
},

2. table属性时间说明

<a-table
        ref="table"
        bordered
        size="middle"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">

• columns 一般在列表页面定义
• dataSource 、pagination、loading、selectedRowKeys、onSelectChange、handleTableChange 属性或者方法均在JeecgListMixin组件中