el-table组件封装

组件

<template>
  <div class="qzone">
    <slot name="searchBox"></slot>
    <slot name="btnBox"></slot>
    <el-table
      :data="tableData"
      ref="multipleTable"
      style="width: 100%"
      border
      :cell-style="{ 'text-align': 'center' }"
      :header-cell-style="{ 'text-align': 'center' }"
      @selection-change="handleSelectionChange"
      @cell-click="cellClick"
      v-loading="loading"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        label="序号"
        type="index"
        width="60"
        :index="indexMethod"
      >
      </el-table-column>
      <el-table-column
      :prop="titleObj.key"
        :label="titleObj.label"
        :width="titleObj.width"
        :min-width="titleObj.minWidth"
        :align="titleObj.align"
        :formatter="titleObj.formatter"
        v-if="showtitleColumn"
      >
        <template slot-scope="scope">
          <slot name="title" :row="scope.row" :index="scope.$index"></slot>
        </template>
      </el-table-column>
      <el-table-column
        :prop="item.key"
        :label="item.title"
        :width="item.width"
        :align="item.align"
        :min-width="item.minWidth"
        :show-overflow-tooltip="item.tooltip"
        v-for="(item, index) in column"
        :key="index"
        :formatter="item.formatter"
      />
      <el-table-column
        fixed="right"
        label="操作"
        :width="actionWidth"
        align="center"
      >
        <template slot-scope="scope">
          <slot name="action" :row="scope.row" :index="scope.$index"></slot>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-pagination
        background
        :current-page.sync="pages.page"
        layout="prev, sizes,pager, next,jumper"
        :total="pages.total"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    loading:{
      type:Boolean,
      default:false
    },
    column: {
      type: Array,
      default: () => {
        return []
      },
    },
    titleObj:{
      type: Object,
      default: () => {
        return {
          key: 'title',
          label:"标题",
          width: '',
          align:'center',
          minWidth:'200',
          formatter:()=>{

          }
        }
      },

    },
    showtitleColumn:{
        type: Boolean,
        default:true
      },
    tableData: {
      type: Array,
      default: () => {
        return []
      },
    },
    pages: {
      type: Object,
      default: () => {
        return {
          total: 0,
          rows: 10,
          page: 1,

        }
      },
    },
    actionWidth: {
      type: String,
      default: '150',
    },
  },
  computed: {
    pageSize: function () {
      if (this.pages.rows) {
        return this.pages.rows
      } else {
        return this.pages.pageSize
      }
    },
  },
  methods: {
    handleCurrentChange(val) {
      this.$emit('currentChange', val)
    },
    handleSizeChange(val) {
      this.$emit('sizeChange', val)
    },
    handleSelectionChange(val) {
      this.$emit('selectChange', val)
    },
    cellClick(row, column, cell, event) {
      this.$emit('cellClick', row, column, cell, event)
    },
    indexMethod(index) {
      let nowindex = 0
      if (this.pages.rows) {
        nowindex = (this.pages.page - 1) * this.pages.rows + index + 1
      } else {
        nowindex = (this.pages.page - 1) * this.pages.pageSize + index + 1
      }
      return nowindex
    },
  },
}
</script>
<style lang="scss" >
.qzone {
  .footer {
    margin-top: 24px;
  }
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: var(--themeColor) ;
}

.el-pagination__sizes .el-input .el-input__inner:hover{
  color: var(--themeColor);
}
.el-pagination.is-background .el-pager li:not(.disabled):hover{
  color: unset;
}
.el-select-dropdown__item.selected{
  color: var(--themeColor);
}
.el-checkbox__input.is-checked .el-checkbox__inner,.el-checkbox__input.is-indeterminate .el-checkbox__inner{
  background-color: var(--themeColor) ;
  border-color: var(--themeColor);
}
.el-checkbox__inner:hover{
  border-color: var(--themeColor);
}
</style>

使用

模板

    <qzoneTable
      :column="column"
      :tableData="tableData"
      :pages="params"
      @currentChange="currentChange"
      @sizeChange="sizeChange"
      @selectChange="selectChange"
      actionWidth="230"
      :loading="loading"
      :showtitleColumn="false"
    >
      <template v-slot:btnBox>
        <div class="btnlist">
          <span class="btnlist-item" @click="addCategory">新增</span>
          <span class="btnlist-item" @click="disabledSelectRows">禁用</span>
        </div>
      </template>
      <div slot="action" slot-scope="scope">
        <el-button class="editbtn" @click="editRows(scope.row)">编辑</el-button>
        <el-button
          class="jinyongbtn"
          @click="changeRowsIshow(scope.row, 0)"
          v-if="scope.row.isShow == '1'"
          >禁用</el-button
        >
        <el-button
          class="editbtn"
          @click="changeRowsIshow(scope.row, 1)"
          v-if="scope.row.isShow == '0'"
          >启用</el-button
        >

        <el-button class="delbtn" @click="delRows(scope.row)">删除</el-button>
      </div>
    </qzoneTable>

script

  data() {
    return {
          tableData: [
        {
          categoryName: '活动下载',
          belongCategory: '政策法规',
          knowNum: 23,
          status: 1,
          pulicAt: '2022-02-23',
        },
        {
          categoryName: '活动下载',
          belongCategory: '法律条款',
          knowNum: 23,
          status: 1,
          pulicAt: '2022-02-23',
        },
      ],
      column: [
        {
          title: '类别名称',
          key: 'name',

        },
        {
          title: '所属类别',
          key: 'parentName',

        },
        {
          title: '类型',
          key: 'type',
          width: '100',
          formatter: function (row, column, cellValue, index) {
            if (row.type == '1') {
              return '非公开'
            } else if (row.type == '2') {
              return '部门'
            } else {
              return '公司'
            }
          },
        },
        {
          title: '状态',
          key: 'isShow',
          width: '100',
          formatter: function (row, column, cellValue, index) {
            if (row.isShow == '1') {
              return '已启用'
            } else {
              return '已禁用'
            }
          },
        },
        {
          title: '发布时间',
          key: 'createTime',
          width: '180',
        },
      ],
      selectTable: [], //被选中的数据
	}
   }