jeecg boot+ant designer pro框架— 列表table标签

最新推荐文章于 2024-06-18 14:55:23 发布

离然

最新推荐文章于 2024-06-18 14:55:23 发布

阅读量4.2k

点赞数 1

分类专栏： jeecg boot框架学习文章标签： jeecg boot+ant designer pro框架

本文链接：https://blog.csdn.net/qq_34514388/article/details/104175624

版权

参考文档：https://www.antdv.com/docs/vue/introduce-cn/

1.引入组件

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

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

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

data () {
      return {
        description: '服装版型管理页面',
        // 表头
        columns: [
          {
            title:'服装名称代码',
            align:"center",
            width: 150,
            dataIndex: 'pcode'
          },
          {
            title:'采用的字段数量',
            align:"center",
            width: 150,
            dataIndex: 'snum'
          },
          {
            title:'中文名称，采用 | 隔开',
            align:"center",
            width: 200,
            dataIndex: 'sname'
          },
          {
            title:'日文名称，采用 | 隔开',
            align:"center",
            width: 200,
            dataIndex: 'snamejp'
          },
          {
            title:'英文名称，采用 | 隔开',
            align:"center",
            width: 200,
            dataIndex: 'snameen'
          },
          {
            title:'创建人',
            align:"center",
            width: 80,
            dataIndex: 'createBy'
          },
          {
            title:'创建时间',
            align:"center",
            width: 120,
            dataIndex: 'createTime',
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            }
          },
          {
            title:'修改人',
            align:"center",
            width: 80,
            dataIndex: 'updateBy'
          },