子组件
<template>
<el-table
border
:data="tableData"
element-loading-text="Loading"
:header-cell-style="{
color: '#000000',
}"
@selection-change="selectionChange"
>
<template v-for="(item, index) in tableHeader" :key="index">
//表格的多选框
<el-table-column
v-if="item.type == 'selection'"
:type="item.type"
header-align="left"
>
</el-table-column>
//表格的序号
<el-table-column
v-else-if="item.type == 'index'"
:type="item.type"
:min-width="item.minHeight"
width="100"
:label="item.label"
>
</el-table-column>
<!-- <el-table-column
v-else-if="item.bindc"
:prop="item.prop"
:label="item.label"
>
<template #default="scope">{{scope.row}}</template>
</el-table-column> -->
//按钮,scope.$index很多余,可以不要
<el-table-column v-else :prop="item.prop" :label="item.label" :width="item.width?item.width:auto">
<template #default="scope">
<div v-if="item.btn">
<el-button
link
v-for="(k, index) in item.btn"
:key="index"
:type="k.type"
:icon="k.icon"
size="mini"
@click="k.func(scope.$index, scope.row)"
>{{ k.name }}</el-button
>
</div>
</template>
</el-table-column>
</template>
</el-table>
</template>
<script setup>
import { defineProps, defineEmits, onMounted, reactive, ref } from "vue";
const emits = defineEmits(["selectionChange"]);
const props = defineProps({
// 表格显示的数据
tableData: {
default: () => [],
},
// 表头数据
tableHeader: {
default: () => [],
},
});
//表格事件
const selectionChange = (val) => {
emits("selectionChange", val);
};
</script>
父组件
1.template部分
<CommonTable
:tableData="tableData"
:tableHeader="tableHeader"
@selectionChange="handleSelectionChange"
></CommonTable>
2.javascript部分
import CommonTable from "../../../components/CommonTable/index.vue";
import { ref, reactive, toRefs, getCurrentInstance} from "vue";
const state = reactive({
tableData: [],
tableHeader: [
{type: "selection",},
{type: "index",minHeight: "20px",label: "序号",},
{prop: "pcMc",label: "批次名称",},
{prop: "zlMc",label: "种类名称",},
{prop: "pdxn",label: "评定学年",},
{prop: "pdxq",label: "评定学期",},
{prop: "xslb",label: "学生类别",},
{prop: "ksrq",label: "申请开始日期",},
{prop: "jsrq",label: "结束日期",},
{prop: "btn",label: "操作",width: "300",
btn: [
{name: "批次分配",func: handleAllocation,type:'primary',icon:'Rank' },
{name: "编辑",func: handleEdit,type:'primary',icon:'edit' },
{name: "删除",func: handleDelte,type:'danger',icon:'delete'},
],
},
],
});
const { tableData, tableHeader } = toRefs(state);
// 渲染
const requestAPI = () => {
getHonBatchPag(page.value.pageNo, page.value.pageNum).then((res) => {
if (res.code == "200") {
tableData.value = res.data.data;
total.value = res.data.count;
}
});
};
requestAPI();
const ids = ref([]);
/** 选择条数 */
function handleSelectionChange(selection) {
ids.value = selection.map(item => item.id);
};
//补充多选框的批量删除-----------------------
function multipleDelCom(){
if(ids.value.length==0){
ElMessage({
type: 'warning',
message: '请选择要删除的记录',
})
return
}
ElMessageBox.confirm("您确认要删除吗?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
).then(function(){
delHonBatchList(ids.value);
}).then(() => {
ElMessage({
type: 'success',
message: '删除成功',
})
requestAPI();
}).catch(() => {
ElMessage({
type: 'info',
message: '已取消',
})
})
}