vue项目中封装elementui的el-table表格组件

组件文件

<template>
    <div class="elTableModule">
        <el-table :data="tabOptions.tableData" border style="width: 100%;">
        	/* 使用插槽去自定义表格最左边一列的内容，例如表格需加入多选框列时*/
            <slot name="tableLeftSlot"></slot>
            <el-table-column
            	v-for="(item,index) in tabOptions.headerColumn"
            	:key="'tableHeader'+index"
            	:prop="item.prop"
            	:label="item.label"
            	:width="item.width"
            >
                <template slot-scope="{ row }">
                	/* 判断是否有需特殊处理的字段内容，如果有则使用插槽在具体页面中去处理，插槽名为需处理的字段名*/
                    <slot v-if='item.slot' :name="item.prop"  :row="row"></slot>
                    /* 当某些字段为空时，用“--”去显示*/
                    <span v-else  v-text="row[item.prop] ? row[item.prop] : '--'"></span>
                </template>
            </el-table-column>
      		 /* 使用插槽去自定义表格最右边一列的内容，例如表格操作列*/
            <slot name="tableRightSlot"></slot>
        </el-table>
    </div>
</template>

<script>
export default {
    name:'',
    props: {
        tabOptions: {
          // 表格数据
          tableData: [],
          // 表头的配置 包括：标题名，标题prop, width等，
          headerColumn: [],
        },
    },
    data() {
        return { }
    },
    methods:{ }
}
</script>

<style scoped="scoped">
/* 表格内文字居中显示*/
 /deep/.el-table .cell{
    text-align: center;
  }
  /* 表头背景色以及表头字体颜色设置*/
  /deep/.el-table__header th{
     background-color: #EFF9FE !important;
     color: #2E6ED2;
  }
</style>

对表格组件进行引用

<template>
  <div class="tableList">      
      <!-- 表格 -->
      <elTable :tabOptions='TabOptions'>
      	   /*插槽-性别处理（slot名为需处理的字段名）*/
          <template slot-scope="scope" slot="gender">
              <span v-if="scope.row.gender==0">女</span>
              <span v-if="scope.row.gender==1">男</span>
          </template>
           /* 插槽-身高处理（slot名为需处理的字段名）*/
          <template slot-scope="scope" slot="height">
              <span>{{scope.row.height}}cm</span>           
          </template>
          /* 使用名叫tableRightSlot的插槽加操作列*/
          <el-table-column slot="tableRightSlot" fixed="right" label="操作" min-width="150">
             <template slot-scope="scope">
                  <el-button @click="info(scope.row)">查看详情</el-button>                  
              </template>
          </el-table-column>
      </elTable >   
  </div>
</template>
<script>
import elTable from '@/components/common/el-table.vue';
export default {
    name: '',
    // 组件挂载
    components: {
        elTable ,      
    },   
    data() {
        return {            
            // 表格配置参数
            TabOptions:{
                //列表数据
                tableData:[
                	{id:'1111',name:'Jones',gender:1,height:1.78},
                	{id:'222',name:'Jack',gender:1,,height:1.85},
                	{id:'3333',name:'Lucy',gender:0,height:1.68}
                ],
                //表头参数（注意：需特殊处理的字段要加上 slot:true，以便表格组件识别处理）
                headerColumn:[
                  {label: '编号',prop: 'date', width: '120'},
                  {label: '名字',prop: 'date', width: '120'},
                  {label: '性别',prop: 'gender', width: '180',slot:true},
                  {label: '身高',prop: 'height', width: '180',slot:true}              
                ]
            },
       }
    },
    created() {
       
    },
    methods:{
       //查看详情
       info(row){
       	
   	   }
	}
</script>

<style scoped="scoped"></style>

表格数据格式化（当无数据时用“- -”代替）

<el-table v-loading="loading" :data="tableData">
   <el-table-column align="center" min-width=200 prop="name" label="名称" :formatter="formatTableData"></el-table-column>
</el-table>

methods:{
	formatTableData(row, column, cellValue, index) {
        if (cellValue !== null && cellValue !== "" && cellValue !== undefined) {
            return cellValue;
        } else {
            return "--";
        }
    },
}