子组件 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>
操作里的按钮没有使用插槽
效果图