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 一般在列表页面定义
  • dataSourcepaginationloadingselectedRowKeysonSelectChangehandleTableChange 属性或者方法均在JeecgListMixin组件中
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,571评论 0 17
  • pyspark.sql模块 模块上下文 Spark SQL和DataFrames的重要类: pyspark.sql...
    mpro阅读 9,516评论 0 13
  • 1/列出mysql数据库中的所有数据库sqoop list-databases -connect jdbc:mys...
    时待吾阅读 2,755评论 1 5
  • 文件路径切换 cd命令的使用文件查看命令 ls命令文件复制粘贴 cp 复制文件 mv剪贴文件文件/文件夹的操作t...
    零_WYF阅读 669评论 0 0
  • 跑步,已经2月有余,我觉得有必要说点什么,虽然自己还是一个跑渣,总结和回顾跑步历程。 首先说说我跑步的原因。不得不...
    码渣阅读 677评论 0 0