基于ElementPlus+ts+vue二次封装的Table和分页插槽

 

 

//封装的Table    子组件
<template>
  <div>
    <el-table :data="tableData" @selection-change="handleSelectionChange"
      :header-cell-style="{ 'text-align': 'center', backgroundColor: 'rgb(250, 250, 250)' }"
      :cell-style="{ 'text-align': 'center' }" style="width: 100%;font-size: 12px;">
      <el-table-column type="selection" v-if="
        ishowd" />
      <el-table-column v-for="(item, index) in listsData" :key="index" :label="item.label" :prop="item.prop">
        <template #default="{ row }">
          <template v-if="item.slot">
            <slot :name="item.prop" :row="row"></slot>
          </template>
          <template v-else>
            {{ row[item.prop] }}
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper" :total="res.total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
      <!-- background -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue';
import { defineEmits, } from 'vue';
//分页
const emit = defineEmits(['SizeChange', 'CurrentChange', 'multid'])
const res = defineProps({
  total: {
    type: Number,
    required: true
  },
  tableData: Array,
  listsData: Array<icliumntem>,
  ishowd: Boolean,
})
//分页
const pageSize = ref(10)
const handleSizeChange = (val: number) => {
  emit('SizeChange', val)
}
const handleCurrentChange = (val: number) => {
  emit('CurrentChange', val)
}
//接受父组件传过来的参数
interface icliumntem {
  label: string;
  prop: string;
  slot?: boolean;
}
// 批量删除
const multid: any = ref()
// 复选框
const handleSelectionChange = (val: any) => {
  multid.value = val.map((item: any) => item.id)
  emit('multid', multid.value)
};

</script>

<style scoped lang="less">
.table {
  margin-bottom: 20px;
  width: 100%;
  text-align: center !important;
}



.demo-pagination-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.demo-pagination-block .demonstration {

  margin-bottom: 16px;
}

:deep(.el-input__wrapper) {
  width: 40px !important;
  margin-right: 20px;
}

:deep(.el-pagination__editor.el-input .el-input__wrapper) {
  margin-right: 0 !important;
}
</style>

//父组件使用
 <Table :total="formInline.total" @SizeChange="SizeChange" @CurrentChange="CurrentChange"
      :tableData="formInline.tableData" :listsData="listsData">
      <template #action="{ row }">
        <el-button type="primary" @click="update(row)" link>修改 </el-button>
        <el-button type="primary" @click="dele(row.id)" link>删除</el-button>
      </template>
      <template #title="{ row }">
        <div @click="detaildata(row)" style="color: #409eff;cursor: pointer;;"> {{ row.title }}
        </div>
      </template>
      <template #addtime="{ row }">
        <div> {{ moment(row.addtime).format('YYYY-MM-DD HH:mm') }}</div>
      </template>
    </Table>
//
//封装的列表显示字段
const listsData: any = reactive([
  {
    label: '试卷名称',
    prop: 'title',
    slot: true,
  },
  
  {
    label: '创建人',
    prop: 'depname',
  },
  {
    label: '更新时间',
    prop: 'addtime',
    slot: true
  },
  {
    label: '操作',
    prop: 'action',
    slot: true,
  },
]);