element封装一个表格

 
<template>
  <div>
    <el-table
       ref="multipleTable"
       v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.5)"
      :header-cell-style="header_cell_style"
      :row-style="rowStyle"
      :cell-style="cellStyle"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
    <el-table-column type="selection"   v-if="selection" width="55">
    </el-table-column>
      <el-table-column
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
         :show-overflow-tooltip="true"
        v-for="(item, index) in tableColumn"
        :key="index"
      >
        <template slot-scope="scope">
          <!-- 状态时候做判断 -->
          <div v-if="item?.status">
              <div v-for="(tag,tagi) in  item?.status" :key="tagi">
                <el-tag size="small" :style="tag?.style" v-if="tag.name === scope.row[item.prop]" >
                  <span  >{{ tag.desc || '...' }}</span>
                </el-tag>
              </div>
          </div>
         <div v-else>
          <!-- obj数据进行判断 -->
          <span :style="item?.style" v-if="item.type === 'Object'">{{
          scope.row[item.prop][item.ObjectField] || '...'
          }}</span>
          <span :style="item?.style" v-else>{{ scope.row[item.prop] || '...' }}</span>
         </div>
        </template>
      </el-table-column>
      <!-- 操作模块 -->
      <el-table-column
        :prop="operation.prop"
        :label="operation.label"
        :width="operation.width"
         fixed="right"
        v-if="operation?.isOperation"
      >
        <template slot-scope="scope">
          <el-button
            :style="item2?.style"
            type="text"
            v-for="(item2, index2) in operation.list"
            :key="index2"
            size="small"
            >
            <!-- 替换对象 -->
            <span  @click="operationClick(item2?.replace.event, scope.row)" v-if="item2?.replace && item2?.replace?.judge === scope.row[item2?.replace?.prop]">{{ item2?.replace?.name }}</span>
            <span  @click="operationClick(item2.event, scope.row)" v-else>{{ item2.name }}</span>
           </el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    // 加载动画
    loading: {
      type: Boolean,
      default: false
    },
    // 选中的数据
    selectRows: {
      type: Array
    },
    // 表格数据
    tableData: {
      type: Array
    },
    // 行列表
    tableColumn: {
      type: Array
    },
    // 是否有选择按钮
    selection: {
      type: Boolean,
      default: false
    },
    // 操作对象
    operation: {
      type: Object
    },
    // 头部样式
    header_cell_style: {
      type: Object,
      default: function () {
        return {
          background: '#C2DBCE',
          'text-align': 'center',
          color: '#333333',
          'font-weight': 'bold'
        }
      }
    },
    // 行样式
    rowStyle: {
      type: Object,
      default: function () {
        return {
          'text-align': 'center'
        }
      }
    },
    // 列样式
    cellStyle: {
      type: Object,
      default: function () {
        return {
          'text-align': 'center'
        }
      }
    }
  },
  data() {
    return {
    }
  },
  methods: {
    // 操作点击事件
    operationClick(type, row) {
      const data = {
        type,
        item: row
      }
      this.$emit('click', data)
    },
    // 选择按钮事件
    handleSelectionChange(val) {
      this.$emit('handleSelectionChange', val)
    }

  }
}
</script>

<style>

</style>

使用方法：

 data() {
    return {
      // 对应列数据
      tableColumn: [
        {
          prop: 'taskNumber',
          label: '任务编号'
        },
        {
          prop: 'sampleArea',
          label: '区域'
        },
        {
          prop: 'sampleNumber',
          label: '采样点数量'
        },
        {
          prop: 'reportTime',
          label: '上报时间'

        },

        {
          prop: 'taskStatus',
          label: '任务状态',
          status: [
            {
              name: 'TO_LASSOED',
              style: {
                color: '#F82E2E'
              },
              desc: '待下发'
            },
            {
              name: 'IN_TASK',
              style: {
                color: '#FF0000'
              },
              desc: '实施中'
            },
            {
              name: 'REJECT',
              style: {
                color: '#F82E2E'
              },
              desc: '已拒绝'
            },
            {
              name: 'LASSOED',
              style: {
                color: '#67C23A'
              },
              desc: '下发中'
            },
            {
              name: 'REPORTING',
              style: {
                color: '#409EFF'
              },
              desc: '上报中'
            },
            {
              name: 'COMPLETED',
              style: {
                color: '#E4820E'
              },
              desc: '已完成'
            }
          ]
        },
        {
          prop: 'samplingRange',
          label: '采样范围(m)'
        },
        {
          prop: 'remark',
          label: '备注'
        }
      ],

      // 表单其他操作
      operation: {
        prop: 'operation',
        label: '操作',
        isOperation: true,
        list: [
          {
            name: '下发',
            event: 'Issued',
            replace: {
              prop: 'taskStatus',
              name: '撤回',
              event: 'withdraw',
              judge: 'LASSOED'
            }
          },
          {
            name: '删除',
            event: 'delete',
            style: {
              color: '#F82E2E'
            }
          }
        ]
      },
      // 请求参数
      paramsData: {
        enable: 'ENABLE',
        limit: 8,
        page: 1,
        samplingProjectId: '',
        sampleArea: ''
      },
      // 总数
      total: 0,
      // 表格传入数据
      tableData: [],
      // 多选选择的值
      multipleData: [],
      // 选中的数据
      selectRows: []
    }
  },

效果图：