vue3.0基于elementUI 和 ts 的基础上对表格进行简单的封装,只是为了展示如何来简单的表格封装自定义,组件并不是很完美,后面根据自己的需求在进行完善!
组件的使用:
<table-info
:tableLabel="tableLabel2"
:tableData="tableData2"
>
<template #matchingResult="{ row }">
<!-- #matchingResult 是列表中自定义的名字 通过这种方式来自定义表格中的内容 -->
<p :class="{icon: true,
icon_green: row.matchingResult == 0,
icon_red: row.matchingResult == 1}"></p>
</template>
<template #StateSort="{ row }">
<span :class="{ optSpan: row.matchingResult == 0 }"
@click="infoBtnFn(row)">
{{ row.matchingResult == 0 ? "详情查看" : "无主体对象" }}
</span>
</template>
</table-info>
// 表格键名和类型对应数组
tableLabel2: [
{
label: "序号",
type: "seq",
width: 60,
},
{
label: "对象本体",
keyName: "ObjOntology",
// sortable: true, // 排序
},
{
label: "对比对象",
keyName: "comparisonObj",
},
{
label: "匹配结果",
type: "custom", // custom 自定义
name: "matchingResult",
},
{
label: "操作",
type: "custom", // custom 自定义
name: "StateSort",
},
],
// 表格数据
tableData2: [
{
id: "01",
ObjOntology: "AAA表",
comparisonObj: "AAA表",
matchingResult: 0,
},
{
id: "02",
ObjOntology: "BBB表",
comparisonObj:"BBB表" ,
matchingResult: 0,
},
{
id: "03",
ObjOntology: "CCC表",
comparisonObj: "CCC表",
matchingResult: 1,
},
{
id: "04",
ObjOntology: "******",
comparisonObj: "******",
matchingResult: 1,
},
{
id: "05",
ObjOntology: "******",
comparisonObj: "******",
matchingResult: 0,
}
],
组件代码
<!-- 普通简单表格 -->
<template>
<div class="panelTable">
<el-table
:style="{ width: '100%' }"
:data="tableData"
stripe
height="100%"
v-loading="loading"
element-loading-text="加载中…"
:default-sort="{ prop: '', order: 'descending' }"
>
<template v-for="(item, index) in tableLabel">
<el-table-column
v-if="item.type == 'seq'"
:key="item.type"
label="序号"
:fixed="item.fixed"
align="center"
:width="item.width"
>
<template #default="scope">
<span v-if="pageIndex && page.size">{{
scope.$index + (pageIndex - 1) * page.size + 1
}}</span>
<span v-else>{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column
v-else-if="item.type === 'custom'"
:key="item.name"
:fixed="item.fixed"
:label="item.label"
align="center"
:sortable="item.sortable"
:width="item.width"
:show-overflow-tooltip="true"
>
<template #default="scope">
<slot :name="item.name" :row="scope.row" :index="index + 1"></slot>
</template>
</el-table-column>
<el-table-column
v-else
:key="index"
:fixed="item.fixed"
:prop="item.keyName"
:label="item.label"
align="center"
:sortable="item.sortable"
:width="item.width"
:show-overflow-tooltip="true"
>
</el-table-column>
</template>
</el-table>
<div class="panelPage">
<el-pagination
v-if="page.size"
background
layout="->,total,prev, pager, next"
:total="page.total"
:page-size="page.size"
:current-page="page.currentPage"
@current-change="pageChangeHandle"
/>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, toRefs, reactive, onMounted, watch } from "vue";
export default defineComponent({
name: "SimpleTable",
props: {
tableLabel: {
type: Array,
default: () => {
return [];
},
},
tableData: {
type: Array,
default: () => {
return [];
},
},
page: {
type: Object,
default: () => {
return {
size: 15,
currentPage: 1,
total: 0
};
},
},
loading: {
type: Boolean,
default: false,
},
wrapperHeight: {
type: String,
default: "100%",
},
},
setup(props, { emit }) {
// 数据
const state = reactive({
pageIndex: 0,
});
// 方法
const methods = reactive({
// 点击分页
pageChangeHandle(val: number) {
state.pageIndex = val;
emit("pageChange", val);
},
});
return {
...toRefs(state),
...toRefs(methods),
};
},
});
</script>
<style lang="scss" scoped>
</style>