平常项目中,我们需要用到大量的el-table组件，而有些组件只是一些内容的展示，或者一些常规的table组件,这个时候我们可以考虑下去封装,方便复用.下面就是我的代码,如有不足,请在下方留言。

1 首先我们需要建立一个父组件，引入子组件，可以根据自己的喜好把table里面的操作按钮封装在一个组件里面,我这里是分开封装的。

<template>
  <div class="common_bgc">
    <!-- table表格 -->
    <com-table :tableData='tableData'
               :tabCloum='tabCloum'
               :tableSelect='tableSelect'
               :tableRadio='tableRadio'
               :pageNum='pageNum'
               :pageSize='pageSize'
               :total='total'
               @handleSelectionChange='handleSelectionChange'
               @handleCurrentChange='handleCurrentChange'>
      <el-table-column slot="button"
                       label="操作"
                       align="center">
        <template slot-scope="scope">
          <!-- tab里面的操作按钮 -->
          <table-button :scope='scope'
                        :tabButtonList='tabButtonList'
                        @tableButtonMethod='tableButtonMethod'></table-button>
        </template>
      </el-table-column>
    </com-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 20,
      tabButtonList: [{
        name: "编辑",
        icon: "editor",
        id: "4"
      },{
        name: "详情",
        icon: "details",
        id: "5"
      },{
        name: "删除",
        icon: "delete",
        id: "6"
      }],//传table里面有那些操作
      tableData: [],
      tableSelect: true,//是否有多选操作列
      tableRadio: false,//是否有单选操作列
      tabCloum: [
        { label: '设备编号', prop: 's1' },
        { label: '设备名称', prop: 's2' },
        { label: '区域名称', prop: 's3', ellipsisyi: 'ellipsis' },//ellipsis预留移入显示
        { label: '街道名称', prop: 's4', render: (row) => {
            if (row.s4 == "1") {
              return "<div style='color: red;'>街道1</div>"
            } else {
              return "<div style='color: yellowgreen;'>街道2</div>"
            }
          }},
        { label: '站点名称', prop: 's5' },
        { label: '挂载设备数量', prop: 's6' },
        { slot: 'button', name: '操作' }], // 操作列
    }
  },
  created () {
  },
  mounted () {
  },
  watch: {
  },
  methods: {
    //新增 编辑 详情 删除
    tableButtonMethod (val) {
      console.log(val, 'val')
      switch (val.state) {
        // 新增
        case '3':
          break;
        case '4':
          // 编辑
          break;
        case '5':
          // 详情
          break;
        case '6':
          // 删除
          break;
        default:
          break;
      }
    }
  }
}
</script>

2 建立子组件,根据自己项目的实际需求,处理业务判断.

<template>
  <div class="com_table_page">
    <!-- table -->
    <div class="common_table">
      <el-table :data="tableData"
                border
                @selection-change="handleSelectionChange"
                style="width: 100%">
        <el-table-column type="selection"
                         align="center"
                         width="50"
                         v-if="tableSelect">
        </el-table-column>
        <el-table-column align="center"
                         width='60'
                         v-if="tableRadio">
          <template slot-scope="scope">
            <el-radio v-model="radioStationVal"
                      :label="scope.row.id"
                      @change="radioChange(scope.row.id)">{{null}}</el-radio>
          </template>
        </el-table-column>
        <el-table-column label="No"
                         align="center"
                         width="50">
          <template slot-scope="scope">
            <span v-text="(pageNum-1)*pageSize+(scope.$index+1)"></span>
          </template>
        </el-table-column>
        <template v-for="(item, index) in tabCloum">
          <!-- 操作列 -->
          <slot v-if="item.slot"
                :name="item.slot"></slot>
          <!-- 普通列 -->
          <el-table-column v-else
                           :key='index'
                           :label="item.label"
                           align="center">
            <template slot-scope="scope">
              <div v-if="scope.row[item.prop]==null||scope.row[item.prop]==''">
                <span>-</span>
              </div>
              <div v-else>
                <div v-if="item.ellipsisyi">
                  <el-tooltip :content="scope.row[item.prop]"
                              placement="top"
                              effect="light"
                              class="ellipsisyi">
                    <div>{{scope.row[item.prop]}}</div>
                  </el-tooltip>
                </div>
                <div v-else>
                  <span v-if="item.render" v-html="item.render(scope.row)"></span>
                  <span v-else
                        v-text="scope.row[item.prop]"></span>
                </div>
              </div>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="common_page"
         v-show="total!=0">
      <el-pagination background
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="newPageNum"
                     :page-size="pageSize"
                     layout="prev, pager, next"
                     :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableSelect: {
      type: Boolean,
      default: false
    },//多选
    tableRadio: {
      type: Boolean,
      default: false
    },//单选
    tableData: {
      type: Array
    },
    tabCloum: {
      type: Array
    },
    pageNum: {
      type: Number
    },
    pageSize: {
      type: Number
    },
    total: {
      type: Number
    }
  },
  data () {
    return {
      newPageNum: 1,
      radioStationVal: ''
    }
  },
  created () {
  },
  mounted () {
  },
  watch: {
    pageNum (val) {
      this.newPageNum = val
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    // 当前页
    handleCurrentChange (val) {
      this.$emit('handleCurrentChange', val)
    },
    //多选框选择
    handleSelectionChange (val) {
      this.$emit('handleSelectionChange', val)
    },
    // 单选选事件
    radioChange (id) {
      this.$emit('radioChange', id)
    }

  }
}
</script>

觉得还不错,请帮忙点个赞,万分感谢.后续会陆陆续续出实用篇与技术篇的文章.也祝你在前端技术的路上越走越远.