element 表格二次封装

<template>

  <div class="mrt20 table-wrap">

    <el-table :data="tableData"

             ref="multipleTable"

              v-loading="loading"

              @row-click="onRowClick"

              @row-dblclick="onRowDblclick"

              @sort-change="onSortChange"

              :row-key="getRowKeys"

              @select="select"

              @select-all="selectAll"

              :header-cell-style="{background:'#F8F8F8', color:'rgba(0,0,0,0.85)'}"

              @selection-change="handleSelectionChange"

              :height="height"

              style="width: 100%">

      <el-table-column v-if="!excludeComponent.includes(componentName)"

                       type="selection"

                       :reserve-selection="true"

                       width="55">

      </el-table-column>

      <template v-for="col in column">

       <el-table-column v-if="col.type === 'img'"

                         :prop="col.prop"

                         :key="col.prop"

                         :label="col.label"

                         :min-width="col.minWidth">

          <template slot-scope="scope">

            <span @click="onClick(scope.row, 'onImg')"><img src="~@/assets/images/1.png"></span>

          </template>

        </el-table-column>

        <el-table-column v-if="col.type === 'link'"

        :prop="col.prop"

        :key="col.prop"

        :label="col.label"

        :min-width="col.minWidth">

        <template slot-scope="scope">

        <span v-if="scope.row[col.prop]" @click="onClick(scope.row, 'onLink')" class="a-link"><a>{{scope.row[col.prop]}}</a></span>

        <span v-if="!scope.row[col.prop]">-</span>

        </template>

        </el-table-column>

        <el-table-column v-if="col.type === 'date'"

        :prop="col.prop"

        :key="col.prop"

        :label="col.label"

        :min-width="col.minWidth">

        <template slot-scope="scope">

        <span v-if="scope.row[col.prop]" >{{scope.row[col.prop] | formatDate('yyyy-MM-dd')}}</span>

        <span v-if="!scope.row[col.prop]">-</span>

        </template>

        </el-table-column>

        <el-table-column v-if="col.type === 'map'"

                         HEAD

                         :prop="col.prop"

                         :key="col.prop"

                         :label="col.label"

                         :min-width="col.minWidth">

          <template slot-scope="scope">

            <span v-if="scope.row[col.prop] && col.map[scope.row[col.prop]]" :class="col.map[scope.row[col.prop]].color">{{col.map[scope.row[col.prop]].value || col.map[scope.row[col.prop]]}}</span>

            <span v-if="!scope.row[col.prop] || !col.map[scope.row[col.prop]]">-</span>

          </template>

        </el-table-column>

        </el-table-column>

        <el-table-column v-if="col.type === 'button'"

                         prop="oprate"

                         :min-width="col.minWidth"

                         :key="col.prop"

                         label="操作">

          <template slot-scope="scope">

            <span v-for="(item, index) in col.buttonList"

                  size="small"

                  :key="index"

                  class="btn-text mrl10"

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

          </template>

        </el-table-column>

        <el-table-column v-if="!['img', 'button', 'map', 'link', 'date'].includes(col.type)"

                         :prop="col.prop"

                         :key="col.prop"

                         :label="col.label"

                         :width="col.Width"

                         :min-width="col.minWidth">

               <template slot-scope="scope">

                      <span v-if="scope.row[col.prop]" :class="col.color">{{scope.row[col.prop]}}</span>

                      <span v-if="!scope.row[col.prop]" :class="col.color">{{scope.row[col.prop]}}</span>

               </template>

        </el-table-column>

      </template>

    </el-table>

    <div class="pagination mrb10">

      <div class="footer flex-end">

        <el-pagination background

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

                       @size-change="handleSizeChange"

                       @current-change="handleCurrentChange"

                       :page-size="size"

                       :total="total">

        </el-pagination>

      </div>

    </div>

  </div>

</template>

<script>

import { RESOURCE_COLUMN, UPLOADAPPROVE_COLUMN, THEME_UPLOAD_COLUMN, WALLPAPER_UPLOAD_COLUMN, DESIGNER_MANAGE_COLUMN } from './column';

import { ThemeService } from '@/service'

export default {

  name: 'theme-table',

  components: {

  },

  props: ['componentName', 'height', 'filterfield'],

  data () {

    return {

      excludeComponent: ['uploadTheme', 'uploadWallpaper', 'designerManage', 'resourceList'], // 不需要多选框的组件名

      advancedshow: false,

      column: RESOURCE_COLUMN, // 列

      columnMap: {

        'uploadApprove': { column: UPLOADAPPROVE_COLUMN, methods: 'getApproveList' }, // 审批列表

        'resourceList': { column: RESOURCE_COLUMN, methods: 'getSourceList' }, // 资源列表

        'uploadTheme': { column: THEME_UPLOAD_COLUMN, methods: 'getList' }, // 主题上传列表

        'uploadWallpaper': { column: WALLPAPER_UPLOAD_COLUMN, methods: 'getList' }, // 壁纸上传列表

        'designerManage': { column: DESIGNER_MANAGE_COLUMN, methods: 'getDesignerDatail' }, // 设计师列表

      },

      total: 0,

      page: 1,

      size: 10,

      tableData: [], // 表格数据

      loading: false

    }

  },

  watch: {

    filterfield: {

      handler (val, oldVal) {

        console.log("b.c: " + val, oldVal);

      },

      deep: true //true 深度监听

    }

  },

  methods: {

    getRowKeys(row) {

    return row.id;

    },

    // 查看

    onClick (row, methods) {

      this.$emit('onClick', row, methods)

      console.log(row, methods)

    },

    // 多选

    handleSelectionChange (val) {

      console.log(val, 987)

      this.$emit('handleSelectionChange', val)

    },

    // 点击行

    onRowClick(val){

      this.$emit('row-click', val)

    },

    // 双击行

    onRowDblclick(val){

      this.$emit('row-dblclick', val)

    },

    // 勾选触发

    select(val){

      this.$emit('select', val)

    },

    // 全选

    selectAll(val){

      this.$emit('select-all', val)

    },

    // 排序字段

    onSortChange(val){

      this.$emit('sort-change', val)

    },

    // 分页

    getpage (list, page, size) {

      return list.slice(page * size - size, page * size);

    },


    getData () {

      this.loading = true

      ThemeService[this.columnMap[this.componentName].methods]().then(res => {

        console.log('查询', this.filterfield)

        this.loading = false;

        this.total = res.length;

        this.tableData = this.getpage(res, this.page, this.size);

        this.$emit('getTableData', this.tableData);

      })

    },

    // 获取表格书

    getTableData(){

       return this.tableData;

    },

    // 切换每页条数

    handleSizeChange (val) {

      this.size = val;

      this.getData();

    },

    // 点击页码

    handleCurrentChange (val) {

      this.page = val;

      this.$emit('handleCurrentChange', val);

      this.getData(this.page, this.size);

    },

    // 例的样式回调

    cellStyle (row) {

      if (row.columnIndex === 5 && row.row.checkResult === '失败' && row.column.label === '校验结果') {

        return 'color:red'

      }

    },

    // 清空多选

    clearSelection(){

      this.$refs.multipleTable && this.$refs.multipleTable.clearSelection();

    },

    // 用于多选表格，切换某一行的选中状态

    toggleRowSelection(row, selected){

      console.log(row, selected, 'row, selected')

      this.$refs.multipleTable && this.$refs.multipleTable.toggleRowSelection(row, selected);

    }

  },

  mounted () {

    this.$nextTick(() => {

      this.column = this.columnMap[this.componentName].column;

      this.getData();

      var aa = top.sessionStorage.getItem('datInfo');//获取缓存数据

      console.log(aa, this.filterfield, 98777)

    })

  }

}

</script>

<style lang="less" scoped>

</style>




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

    }

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,222评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,455评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,720评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,568评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,696评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,879评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,028评论 3赞 409
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,773评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,220评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,360评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,002评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2赞 350

推荐阅读更多精彩内容