他来了他来了,他抱着代码走来了,
话不多说,开搞
<el-table :data="tableData()" style="width: 100%;height:90%;background-color: #237ed3;">
<el-table-column label="姓名" width="230">
<template #default="scope">
<div style="display: flex; align-items: center">
<!-- <el-icon>
<timer />
</el-icon> -->
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</div>
</template>
</el-table-column>
<el-table-column label="今日工作安排" width="400">
<template #default="scope">
<el-popover effect="light" trigger="hover" placement="top" width="auto">
<template #default>
<div>name: {{ scope.row.name }}</div>
<div>address: {{ scope.row.address }}</div>
</template>
<template #reference>
{{ scope.row.name }}
</template>
</el-popover>
</template>
</el-table-column>
<el-table-column label="所属项目" width="500">
<template #default="scope">
<el-popover effect="light" trigger="hover" placement="top" width="auto">
<template #default>
<div>name: {{ scope.row.name }}</div>
<div>address: {{ scope.row.address }}</div>
</template>
<template #reference>
{{ scope.row.name }}
</template>
</el-popover>
</template>
</el-table-column>
<el-table-column>
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">
</el-button>
<!-- <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
Delete
</el-button> -->
</template>
</el-table-column>
</el-table>
表格代码
<el-pagination background layout="prev, pager, next ,total,sizes" :total="state.total"
@current-change="handleCurrentChange" @size-change="handleSizeChange" />
分页器代码
const state = reactive({
page: 1,
limit: 10,
total: allTableData.length,
});
//前端限制分页(tableData为当前展示页表格)
const tableData = () => {
return allTableData.filter(
(item, index) =>
index < state.page * state.limit &&
index >= state.limit * (state.page - 1)
);
};
//改变页码
const handleCurrentChange = (e: any) => {
state.page = e;
};
//改变页数限制
const handleSizeChange = (e: any) => {
state.limit = e;
};
分页器逻辑
.el-table {
--el-table-border-color: transparent;
--el-table-border: none;
--el-table-text-color: #bdbdbe;
--el-table-header-text-color: #bdbdbe;
--el-table-row-hover-bg-color: transparent;
--el-table-current-row-bg-color: transparent;
--el-table-header-bg-color: transparent;
--el-table-bg-color: transparent;
--el-table-tr-bg-color: transparent;
--el-table-expanded-cell-bg-color: transparent;
}
表格透明
到此为止,结束