element table组件二次封装

table封装组件

template

<template>
  <div class="table_box">
    <el-table :data="tableData" :border="border" height="90%" style="width: 100%;" :stripe="stripe" :empty-text="!emptyImg ? emptyText:''">
      <el-table-column type="selection" width="30" v-if="checkbox" />

      <template v-for="col in config">
        <!-- 插槽 -->
        <el-table-column
          :key="col.prop"
          :label="col.label"
          :width="col.width && col.width"
          v-if="col.type === 'slot'">
          <template slot-scope="scope">
            <slot :name="col.prop" :row="scope.row"></slot>
          </template>
        </el-table-column>
        <!-- 表格操作 -->
        <el-table-column
          :key="col.prop"
          :label="col.label"
          :width="col.width && col.width"
          v-else-if="col.type === 'operation'">
          <template slot-scope="scope">
            <div class="btns">
              <template>
                <el-button v-for="(btn) in col.btns" :type="col.btnType" 
                :key="btn.text"
                class="btn text"
                @click="handleClick(btn.method,scope.row,scope.$index)"
                >{{btn.text}}</el-button>
              </template>
            </div>
          </template>
        </el-table-column>

        <!-- 普通数据展示 -->
        <el-table-column
          :prop="col.prop"
          :key="col.prop"
          :label="col.label"
          :width="col.width && col.width"
          v-if="!col.type">
        </el-table-column>
        
        <hr v-if="col.type === 'hr'" :key="col.name" />
        <!-- 函数返回数据展示 -->
        <el-table-column
          :prop="col.prop"
          :key="col.prop"
          :label="col.label"
          :width="col.width && col.width"
          v-if="col.type === 'function'">
          <template slot-scope="scope">
            <span :class="{
                'l_status_radio':col.isStatus,
                'st_success':col.prop === 1 && col.isBeg,
                'st_primary':col.prop === 1 && !col.beg}" >{{ col.callback && col.callback(scope.row[col.prop],scope.row)}}</span>
          </template>
        </el-table-column>

        <!-- 带icon -->
        <el-table-column
          :prop="col.prop"
          :key="col.prop"
          :label="col.label"
          :width="col.width && col.width"
          v-if="col.type === 'icon'">
          <template slot-scope="scope">
            <div class="flex" v-html="col.callback && col.callback(scope.row[col.prop])"></div>
          </template>
        </el-table-column>
      </template>
      
      <!-- 数据为空时 -->
      <template slot="empty" v-if="!tableData.length && emptyImg">
        <div class="empty">
          <img :src="emptyImg" />
          <span v-if="emptyText">{{emptyText}}</span>
        </div>
      </template>
    </el-table>
    <pagination v-if="pagination" :page="pageNumber" :limit="pageSize" :total="tableTotal" @pagination="changePage" />
  </div>
</template>

js代码

<script>
import Pagination from "@/components/Pagination"
export default {
  name:'TableData',
  props:{
    // 表格配置
    config:{
      type:Array,
      default(){
        return []
      }
    },
    // 多选表格
    checkbox: {
      type:Boolean,
      default: false,
    },
    border: {
      type:Boolean,
      default: false,
    },
    emptyText:{
      type:String,
      default:"暂无数据"
    },
    emptyImg:{
      type:String,
      default:""
    },
    stripe: {
      type:Boolean,
      default: false,
    },
    // 是否有页码
    pagination:{
      type:Boolean,
      default: true,
    },
    // 数据
    tableData:{
      type:Array,
      default(){return[]}
    },
    pageNumber:{
      type:Number,
      default:1
    },
    pageSize:{
      type:Number,
      default:10
    },
    tableTotal:{
      type:Number,
      default:0
    }
  },
  components:{Pagination},
  data(){
    return{}
  },
  methods: {
    // table操作方法
    handleClick(method,row,index){
      this.$emit('click',{method,row,index})
    },

    // 更新数据 页码
    changePage(e){
      this.$emit('changePage',e)
    },
  },
}
</script>

样式

<style lang="scss" scoped>
  .table_box{
    width: 100%;
    height: 100%;
    >>> .el-table .cell{
      white-space: nowrap;
    }
    /deep/.el-table__body-wrapper{
      height: 100% !important;
    }
    .btns{
      position: relative;
      display: flex;
      flex-wrap: nowrap;
      overflow: hidden;
    }
  }

  .empty{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    // justify-content: center;
    height: 100%;
    img{
      width: 106px;
    }
    span{
      font-size: 14px;
      color: #909090;
      line-height: 22px;
      padding: 10px 0;
    }
  }
</style>

父组件中的应用

html中的标签

<table-data 
						:config="tableConfig.thead" 
						:pageNumber="tableQuery.pageNumber"
						:pageSize="tableQuery.pageSize"
						:dataTotal="tableTotal"
						:tableData="tableData" 
						:emptyImg="tableConfig.emptyImg"
						:emptyText="tableConfig.emptyText"
						@pagination="changePage">
						<template v-slot:status="{row}">
							<span class="status">{{ row.status }}</span>
						</template>
						<!-- 操作  -->
						<template v-slot:btns="{row}">
							<div class="btns">
								<template v-if="OperaBtns(row).length <= 3">
									<el-button v-for="(btn) in OperaBtns(row)" type="text" 
									:key="btn.text"
									class="btn text"
									@click="handleClick(btn)"
									>{{btn.text}}</el-button>
								</template>

								<template v-if="OperaBtns(row).length > 3">
									<el-button v-for="(btn) in OperaBtns(row).slice(0,2)" type="text" 
									:key="btn.text"
									class="btn text"
									@click="handleClick(btn)"
									>{{btn.text}}</el-button>
								</template>

								<el-tooltip  v-if="OperaBtns(row).length > 3" placement="bottom" effect="light">
									<div slot="content">
										<div class="btn_more">
											<el-button v-for="(btn) in OperaBtns(row).slice(2)" type="text" 
												:key="btn.text"
												class="btn text"
												@click="handleClick(btn)"
												>{{btn.text}}</el-button>
										</div>
									</div>
									<el-button class="btn text">...</el-button>
								</el-tooltip>
							</div>
						</template>
					</table-data>

js配置

type类型除了默认的没有值，还有回调函数的function和插槽slot类型可以自定义展示的内容

import TableData from '@/components/TableData';
export default {
	components:{TableData},
	data() {
		return {
			tableQuery:{
				pageNumber:1,
				pageSize:10
			},
			tableTotal: 0,
			tableConfig:{
				thead:[
					{label:"会诊标题",prop:"title"},
					{
						label:"状态",
						prop:"status",
						type:'function',
						isStatus:true,
						callback:(prop,row)=>{
							const arr = ['未开始','进行中','已结束','已取消']
							if(prop === 1){
								if(row.isBeg){
									return arr[1]
								}else{
									return arr[0]
								}
							}else{
								return arr[prop]
							}
						}
					},
					{label:"会议时间",prop:"meetingTime",width:'280px'},
					{label:"旁听权限",prop:"audit",type:"icon",
						callback:(prop)=>{
							const img=require('@/assets/imgs/home/allow.png')
							return (`
							<img src="${img}" style="width:16px;height:16px;margin-right:6px" />
							${prop ? '允许':'不允许'}
							`	)
						}
					},
					{label:"操作",type:"slot",prop:"btns"},
				],
				emptyImg:require('@/assets/imgs/empty.png'),
				emptyText:'暂无会诊记录',
			},
			tableData:[{name:11,status:1}],
		}
	}

表格统一事件处理函数

		// table操作处理函数
		handleClick(data){
			console.log(data,'============')
			const {method,id = ''} = data
			switch(method){
				case "onMeeting":
					this.$router.push({path:'/room',query:{id}});
					break;
				case "onView":
					this.$router.push({path:'/checkDetail',query:{id}});
					break;
					//	...
			}
		},