形如下面的图片
1 label与prop属性
const columns=[{label: "文件名",prop: "fileName",scopedSlots: "fileName",},{ label: "删除时间",prop: "recoveryTime",width: "200",},{ label: "大小",prop: "fileSize",scopedSlots: "fileSize",width: "200",},
];
const tableData = ref({});
const tableOptions = {extHeight: 20,
};
**label：**表示列的标题，即表头的内容。
**prop：**表示列对应的数据字段，指定从 tableData 中获取哪一列的数据来显示。
2 scopedSlots（作用域插槽名称）属性
A Table（子组件）组件中
<template><div><el-tableref="dataTable":data="dataSource.list || []":height="tableHeight":stripe="options.stripe":border="options.border"header-row-class-name="table-header-row"highlight-current-row@row-click="handleRowClick"@selection-change="handleSelectionChange"><!-- :stripe="options.stripe" 斑马纹 --><!--selection选择框--><el-table-columnv-if="options.selectType && options.selectType == 'checkbox'"type="selection"width="50"align="center"></el-table-column><!--序号--><el-table-columnv-if="options.showIndex"label="序号"type="index"width="60"align="center"></el-table-column><!--数据列--><template v-for="(column, index) in columns"><template v-if="column.scopedSlots"><el-table-column:key="index":prop="column.prop":label="column.label":align="column.align || 'left'":width="column.width"><template #default="scope"><slot:name="column.scopedSlots":index="scope.$index":row="scope.row"></slot></template></el-table-column></template><template v-else><el-table-column:key="index":prop="column.prop":label="column.label":align="column.align || 'left'":width="column.width":fixed="column.fixed"></el-table-column></template></template></el-table><!-- 分页 --><divclass="pagination"v-if="showPagination"><el-paginationv-if="dataSource.totalCount"background:total="dataSource.totalCount":page-sizes="[15, 30, 50, 100]":page-size="dataSource.pageSize":current-page.sync="dataSource.pageNo":layout="layout"@size-change="handlePageSizeChange"@current-change="handlePageNoChange"style="text-align: right"></el-pagination></div></div>
</template>
<script setup>
import { ref, computed } from "vue";const emit = defineEmits(["rowSelected", "rowClick"]);
const props = defineProps({dataSource: Object,showPagination: {type: Boolean,default: true,},showPageSize: {type: Boolean,default: true,},options: {type: Object,default: {extHeight: 0,showIndex: false,},},columns: Array,fetch: Function, // 获取数据的函数initFetch: {type: Boolean,default: true,},
});const layout = computed(() => {return `total, ${props.showPageSize ? "sizes" : ""}, prev, pager, next, jumper`;
});
//顶部 60 , 内容区域距离顶部 20， 内容上下内间距 15*2 分页区域高度 46
const topHeight = 60 + 20 + 30 + 46;const tableHeight = ref(props.options.tableHeight? props.options.tableHeight: window.innerHeight - topHeight - props.options.extHeight
);//初始化
const init = () => {if (props.initFetch && props.fetch) {props.fetch();}
};
init();const dataTable = ref();
//清除选中
const clearSelection = () => {dataTable.value.clearSelection();
};//设置行选中
const setCurrentRow = (rowKey, rowValue) => {let row = props.dataSource.list.find((item) => {return item[rowKey] === rowValue;});dataTable.value.setCurrentRow(row);
};
//将子组件暴露出去，否则父组件无法调用，这两个方法在改项目中没有用到
defineExpose({ setCurrentRow, clearSelection });//行点击，点击行的任意位置，都可以选中
const handleRowClick = (row) => {dataTable.value?.toggleRowSelection(row);emit("rowClick", row);
};//多选
const handleSelectionChange = (row) => {emit("rowSelected", row);
};//切换每页大小
const handlePageSizeChange = (size) => {props.dataSource.pageSize = size;props.dataSource.pageNo = 1;props.fetch();
};
// 切换页码
const handlePageNoChange = (pageNo) => {props.dataSource.pageNo = pageNo;props.fetch();
};
</script>
<style lang="scss" scoped>
.pagination {padding-top: 10px;padding-right: 10px;
}
.el-pagination {justify-content: right;
}:deep(.el-table__cell) {padding: 4px 0px;
}
</style>
B 父组件中引用Table组件
<Table:columns="columns":showPagination="true":dataSource="tableData":fetch="loadDataList":initFetch="false":options="tableOptions"@rowSelected="rowSelected"@rowClick="rowClick">
</Table>
<script setup>
//列表
const tableData = ref({});
const tableOptions = {extHeight: 50,selectType: "checkbox",
};//多选 批量选择
const selectFileIdList = ref([]);
const rowSelected = (rows) => {selectFileIdList.value = [];rows.forEach((item) => {selectFileIdList.value.push(item.userId + "_" + item.fileId);});
};
</script>
如果columns数组对象中有scopedSlots（作用域插槽名称）属性，用来指定插槽名称，则可以在父组件中自定义一个插槽代替如下部分，若无，就按照Table组件中的方式去渲染
<template #插槽名字="{index,row}">
</template>
比如说在分享页面中，自定义一个fileName插槽代替如上部分
<template #fileName="{index,row} ">
</template>
<script setup>
const columns = [{label: "文件名",prop: "fileName",scopedSlots: "fileName",},]</script>