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

    }