vue3中对elementplus的table进行封装_vue3 封装element ui plus表单组件

子组件 table.vue

setup使用的是语法糖

<template>
 <el-card>
 <!-- 表格 -->
  <el-table :data="tableData"
   border
   stripe
   style="width: 100%">
 <!-- 选择框 -->
   
   <el-table-column type="selection"  width="50"  v-if='select'  @selection-change="handleSelectionChange"
   :multipleSelection='multipleSelection'
   >
    
   </el-table-column>
   
   <!--序号 -->
   <el-table-column  type='index' width="80" v-if="showIndex"  label="序号" >
    </el-table-column>
    
 
     <!-- 特殊处理列表 switch -->
    <template v-for="value in tableLabel ">
      <el-table-column  v-if="value.type==='function'" :key="value.id" :prop='value.prop'
      :label='value.label' width="180" >
      <!-- vue3里不适应slot-scope ,使用#default="scope"-->
      <template #default="scope">
      
 
    <el-switch
    v-model="scope.row.mg_state"
    class="ml-2"
    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
  />
       
      </template>
       </el-table-column> 
       <!-- 特殊处理列表 操作，不会使用插槽 -->
        <el-table-column  v-else-if="value.type==='opt'" :key="value.id" :prop='value.prop'
       :label='value.label' width="180" >
      <!-- vue3里不适应slot-scope ,使用#default="scope"-->
      <template #default="scope">
         <el-button size="small"
         type='primary'
          @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
    
      </template>
      <!-- 普通列表 -->
       </el-table-column>
       <el-table-column  v-else  :key="value.id"
        :prop='value.prop' 
        :label='value.label'
        >
        </el-table-column> 
     </template>
   
  </el-table>
  <!-- 分页 -->
  <div class="demo-pagination-block">
    
    <el-pagination
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[1, 5, 10, 15]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
 </el-card>
  
</template>
<script lang="ts" setup>
import {ref,defineEmits,defineProps,} from 'vue'
 
const props=defineProps({
    
    
 
    tableData:{
        type:Array,
        default:[]
    },
    tableLabel:{
          type:Object,
          default:[]
    },
    select:{
        type:Boolean,
        default:false
    },
    showIndex:{
        type:Boolean,
        default:false
    },
  currentPage:{
  type:Number,
  default:0
  },
    pageSize:{
    type:Number,
    default:0
   },
   total:{
    type:Number,
    default:0
},
})
 
 
//注册emit
const emit = defineEmits<{
  (e: "handleSizeChange", val: number): void;
  (e: "handleCurrentChange", val: number): void;
}>();
 
//定义emit的值
const handleSizeChange = (val: any) => {
  emit("handleSizeChange", val);
};
const handleCurrentChange = (val: any) => {
  emit("handleCurrentChange", val);
};
 
 
 
  
 
 
</script>
<style scoped>
.demo-pagination-block{
  margin-top: 20px;
  text-align: center;
}
.el-pagination{
  text-align: center;
}
</style>

父组件

<template>
  <div>
    <Table
      :tableData="tableData"
      :tableLabel="tableLabel"
      :showIndex="true"
      :select="true"
      :total='total'
      :currentPage='queryinfo.pagenum'
      :pageSize='queryinfo.pagesize'
      @handleSizeChange='handleSizeChange'
      @handleCurrentChange='handleCurrentChange'
    >
    </Table>
 
    <pre>
   {{ tableData }}
    </pre>
  </div>
</template>
 
<script lang='ts' setup>
import { Users } from "../api/api";
import { reactive, ref } from "vue";
import Table from "../components/commen/table.vue";
 
 
const queryinfo = reactive({
  query: "",
  pagenum: 1,
  pagesize: 2,
});
const showIndex = ref(true);
const select = ref(true);
let tableData = ref([]);
let total=ref()
const getUser = async () => {
  const res = await Users(queryinfo);
  console.log(res);
  tableData.value = res.data.data.users;
  total.value=res.data.data.total
  console.log(tableData.value);
};
const handleSizeChange=(val)=>{
     queryinfo.pagesize=val
     console.log('父子间',val)
     getUser()
}
const handleCurrentChange=(val)=>{
    queryinfo.pagenum=val
     console.log('父子间',val)
    getUser()
}
const tableLabel = reactive([
  { prop: "username", label: "用户名" },
  { prop: "role_name", label: "角色" },
  { prop: "mobile", label: "电话" },
 
  { prop: "email", label: "邮箱" },
  {
    prop: "mg_state",
    label: "状态",
    type: "function",
    callback: (row: any) => {
      return "123";
    },
  },
  { label: "操作",type:'opt' },
]);
getUser();
</script>
 
<style lang="scss" scoped>
</style>

操作里的按钮没有使用插槽

效果图