element 表格二次封装

        

        

        :prop="col.prop"

        :key="col.prop"

        :label="col.label"

        :min-width="col.minWidth">

        

        {{scope.row[col.prop]}}

        -

        

        

        

        :prop="col.prop"

        :key="col.prop"

        :label="col.label"

        :min-width="col.minWidth">

        

        {{scope.row[col.prop] | formatDate('yyyy-MM-dd')}}

        -

        

        

        

                         HEAD

                         :prop="col.prop"

                         :key="col.prop"

                         :label="col.label"

                         :min-width="col.minWidth">

          

            {{col.map[scope.row[col.prop]].value || col.map[scope.row[col.prop]]}}

            -

          

        

        

        

                         prop="oprate"

                         :min-width="col.minWidth"

                         :key="col.prop"

                         label="操作">

          

            

                  size="small"

                  :key="index"

                  class="btn-text mrl10"

                  @click="onClick(scope.row, item.methods)">{{item.label}}

          

        

        

                         :prop="col.prop"

                         :key="col.prop"

                         :label="col.label"

                         :width="col.Width"

                         :min-width="col.minWidth">

               

                      {{scope.row[col.prop]}}

                      {{scope.row[col.prop]}}

               

        

      

    

    

      

        

                       layout="total, prev, pager, next, sizes, jumper"

                       @size-change="handleSizeChange"

                       @current-change="handleCurrentChange"

                       :page-size="size"

                       :total="total">

        

      

    

  




import { TAST_STATUS, AREAFLAG, FEE_STATUS, THEME_CHECK_RESULT}  from '@/model';

// 备注: 1. 列type   img 为图片类型   map 枚举类, 对于的值和颜色可定义在map对象中  button 操作按钮类 link  日期时间戳date,自动应用过滤器转换    可扩展自定义类型 select radio 类等

//       2. 其他无类型默认为 text 类型 可配置color 属性

// 资源列表

const  RESOURCE_COLUMN = [

    {

        prop: 'originPackageUrl',

        label: '多彩的云',

        minWidth: '100',

        type: 'img'

    },

    {

        prop: 'resName',

        label: '资源名称',

        minWidth: '180'

    },

    {

        prop: 'resId',

        label: '资源唯一ID',

        minWidth: '180'

    },

    {

        prop: 'resVersion',

        label: '资源版本',

        minWidth: '180'

    },

    {

        prop: 'feeStatus',

        label: '收费状态',

        minWidth: '180',

        type: 'map',

        map: FEE_STATUS

    },

    {

        prop: 'areaFlag',

        label: '分发区域',

        minWidth: '180',

        type: 'map',

        map: AREAFLAG

    },

    {

        prop: 'status',

        label: '资源状态',

        minWidth: '180',

        type: 'map',

        map: TAST_STATUS

    },

    {

        prop: 'oprate',

        label: '操作',

        minWidth: '180',

        type: 'button',

        buttonList : [

            {'methods': 'onView', 'label': '查看'},

            {'methods': 'onHide', 'label': '隐藏'},

            {'methods': 'onDown', 'label': '下架'}

        ]

    }

]

// 上架审核

const  UPLOADAPPROVE_COLUMN = [

    {

        prop: 'originPackageUrl',

        label: '预览图',

        minWidth: '100',

        type: 'img'

    },

    {

        prop: 'resName',

        label: '资源名称',

        minWidth: '180'

    },

    {

        prop: 'resId',

        label: '资源唯一ID',

        minWidth: '180'

    },

    {

        prop: 'resVersion',

        label: '资源版本',

        minWidth: '180'

    },

    {

        prop: 'uploader',

        label: '设计师名称',

        minWidth: '180'

    },

    {

        prop: 'feeStatus',

        label: '收费状态',

        minWidth: '180',

        type: 'map',

        map: FEE_STATUS

    },

    {

        prop: 'areaFlag',

        label: '分发区域',

        minWidth: '180',

        type: 'map',

        map: AREAFLAG

    },

    {

        prop: 'status',

        label: '待审核状态',

        minWidth: '180',

        type: 'map',

        map: TAST_STATUS

    },

    {

        prop: 'oprate',

        label: '操作',

        minWidth: '80',

        type: 'button',

        buttonList : [

            {'methods': 'onProve', 'label': '审核'},

        ]

    }

]

// 主题上传

const  THEME_UPLOAD_COLUMN = [

    {

        prop: 'resName',

        label: '资源名称',

        minWidth: '100',

        type: 'text'

    },

    {

        prop: 'resVersion',

        label: '资源版本号',

        minWidth: '180'

    },

    {

        prop: 'endTime',

        label: '系统校验时间',

        minWidth: '180',

        type: 'date'

    },

    {

        prop: 'uploader',

        label: '设计师名称',

        minWidth: '180'

    },

    {

        prop: 'reason',

        label: '校验结果',

        minWidth: '180'

    },

    {

        prop: 'remark',

        label: '备注',

        minWidth: '180'

    }

]

// 壁纸上传

const  WALLPAPER_UPLOAD_COLUMN = [

    {

        prop: 'resName',

        label: '壁纸文件名',

        minWidth: '180',

    },

    {

        prop: 'resName1',

        label: '壁纸名称',

        minWidth: '180'

    },

    {

        prop: 'resVersion',

        label: '壁纸版本号',

        minWidth: '180'

    },

    {

        prop: 'uploader',

        label: '设计师名称',

        minWidth: '180'

    },

    {

        prop: 'endTime',

        label: '系统校验时间',

        minWidth: '180',

    },

    {

        prop: 'checkResult',

        label: '校验结果',

        minWidth: '180',

        type: 'map',

        map:  THEME_CHECK_RESULT

    },

    {

        prop: 'remarks',

        label: '备注',

        minWidth: '180',

    }

]

// 设计师管理

const DESIGNER_MANAGE_COLUMN = [

    {

        prop: 'desChineseName',

        label: '设计师中文名称',

        Width: '560'

    },

    {

        prop: 'desEnglishName',

        label: '设计师英文名称',

        Width: '560'

    },

    {

        prop: 'desNumId',

        label: '设计师ID',

        Width: '560'

    },

    {

        prop: 'creatData',

        label: '账号创建日期',

        Width: '150'

    }

]

export  {

     RESOURCE_COLUMN,

     UPLOADAPPROVE_COLUMN,

     THEME_UPLOAD_COLUMN,

     WALLPAPER_UPLOAD_COLUMN,

     DESIGNER_MANAGE_COLUMN

    }

你可能感兴趣的:(element 表格二次封装)