形如下面的圖片
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>
?
)
