el-table，el-form在vue中封装组件化，含操作按钮和插槽

做管理系统的时候很多页面都是表格和表单的渲染，为此以elementui为工具封装了两个组件以供复用

Search筛选框

<template>
  <div class="search-panel">
    <el-form v-model="searchData" inline>
      <el-form-item v-for="(item,index) in searchList" :key="index" :label="item.label" :prop="item.prop" :label-width="item.labelWidth">
        <el-input v-if="item.type=='input'" v-model="searchData.name" :placeholder="item.placeholder"></el-input>
        <el-date-picker v-if="item.type=='daterange'"
          :style="item.style"
          v-model="searchData.startToEnd"
          type="daterange" 
          range-separator="~" 
          start-placeholder="开始日期" 
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-date-picker v-if="item.type=='month'"
          @change="item.method"
          v-model="searchData.date"
          type="month"
          placeholder="选择月份"
          value-format="yyyy-MM"
        >
        </el-date-picker>
        <el-button v-if="item.type=='button'" :type="item.buttonType" @click="item.method">{{item.buttonName}}</el-button>
        <el-select v-if="item.type=='select'" v-model="searchData.status" :placeholder="item.placeholder">
          <el-option
            v-for="val in item.statusOptions"
            :key="val.value"
            :label="val.label"
            :value="val.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "Search",
  props: {
    searchData: {
      type: Object,
    },
    searchList: {
      type: Array,
    },
  },
};
</script>

ETable包含上面操作栏，中间渲染table，下面的分页

<template>
  <div class="table-panel">
    <el-row class="table-operate">
      <slot v-for="item in buttonList">
        <el-button :type="item.type" :icon="item.icon" @click="item.method">
          {{ item.name }}
        </el-button>
      </slot>
    </el-row>
    <el-row>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column v-if="tableColums[0].selection" type="selection" width="42" align="center"/> 
        <el-table-column
          prop="number"
          label="序号"
          width="55"
          type="index"
          align="center"
        />
        <template v-for="item in tableColums">
          <el-table-column
            v-if="item.slot"
            :key="item.key"
            :label="item.name"
            :prop="item.key"
            :min-width="item.minWidth"
            align="center"
            :width="item.width"
            :fixed="item.fixed"
          >
            <template slot-scope="scope">
              <slot :name="item.key" :row="scope.row"></slot>
            </template>
          </el-table-column>
          <el-table-column
            v-else
            :key="item.key"
            :label="item.name"
            :prop="item.key"
            :min-width="item.minWidth"
            align="center"
            :width="item.width"
            :fixed="item.fixed"
          />
        </template>
      </el-table>
    </el-row>
    <el-row class="page">
        <div class="page-tag">
          共{{ Math.ceil(page.total / page.pageSize) }}页/{{
            page.total
          }}条数据
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page.currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="page.pageSize"
          layout="sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination>
      </el-row>
  </div>
</template>

<script>
export default {
  name:'ETable',
  props:{
    tableData:{
      type:Array
    },
    tableColums:{
      type:Array
    },
    page:{
      type:Object
    },
    buttonList:{
      type:Array
    }
  },
  methods:{
    //改变每页数量
    handleSizeChange(val){
      this.page.pageSize=val
      this.getList()
    },
    //currentPage当前页改变时
    handleCurrentChange(val) {
      this.page.currentPage=val
      this.getList()
    }
  }
}
</script>

父组件引入

<template>
  <div class="list-container">
    <Search
      :searchData="searchData"
      :searchList="searchList"
    />
    <ETable
      :tableData="tableData"
      :tableColums="tableColums"
      :page="page"
      :buttonList="buttonList"
    >
    <template #operation="scope">
      <el-button @click="addTeam(scope.row)" type="text" icon="el-icon-circle-plus-outline">添加班组</el-button>
      <el-button @click="updateCorp(scope.row)" type="text" icon="el-icon-edit">修改</el-button>
      <el-button @click="deleteCorp(scope.row)" type="text" icon="el-icon-delete">删除</el-button>
    </template>
    </ETable>
  </div>
</template>
<script>
export default {
  data() {
    return{
     searchData:{
        name:'',
        startToEnd:[]
      },
      searchList:[
        {
          type:'input',
          label:'劳务公司名称：',
          prop:'name',
          labelWidth:'120px',
          placeholder:'请输入劳务公司名称',
        },
        {
          type:'daterange',
          label:'参与项目时间：',
          prop:'startToEnd',
          labelWidth:'120px',
          style:'width:250px',
        },
        {
          type:'button',
          buttonName:'查询',
          buttonType:'primary',
          method:()=>this.onsubmit()
        },
        // {
        //   type:'month',
        //   label:'出勤时间：',
        //   method:(row) => this.changeMonth(row),
        //   prop:'button'
        // },
        // {
        //   type:'select',
        //   placeholder:'请选择',
        //   statusOptions:[
        //     {
        //       value:1,
        //       label:'哦豁'
        //     },
        //     {
        //       value:2,
        //       label:'哇偶'
        //     }
        //   ]
        // }
      ],
      tableColums: [
        { key: "name", name: "劳务公司名称", minWidth: "150px", selection:true},
        { key: "teamNum", name: "班组数量", minWidth: "80px" },
        { key: "personNum", name: "人员数量", minWidth: "80px" },
        { key: "startTime", name: "开始时间", minWidth: "120px" },
        { key: "endTime", name: "结束时间", minWidth: "120px" },
        { key: "operation",slot:true,name: "操作", minWidth:"230px", fixed:"right"}
      ],
      tableData:[{
        name:"这个总公司",
        teamNum:10,
        personNum:20,
        startTime:'2021-10-10',
        endTime:'2021-10-20'
      }],
      buttonList:[
        {
          name: '添加劳务公司',
          type: 'primary',
          icon: 'el-icon-plus',
          method: (row, column) => this.addCorp(row),
          disabled:false
        }
      ],
      page:{
        pageSize:10,
        total:2,
        currentPage:1
      }
    }
  },
  methods:{
    addTeam(row){
      this.$router.push({path:'/team/add/',query:{corpId:row.serviceCorporationId}})
    },
    updateCorp(row){
      this.$router.push({path:'/corporation/edit/'+row.serviceCorporationId})
    },
    deleteCorp(row){
      this.$confirm(
          "确定要删除当前信息？",
          "删除确认",
          {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          }
      ).then(() => {
          console.log(row);
      }).catch(()=>{
          this.$message({
              type:'info',
              message:'已取消删除'
          })
      })
    },
    addCorp(){
      this.$router.push({path:'/corporation/add'})
    },
  }
};
</script>