今天他来了,今天来一个el-table的表格分页

他来了他来了,他抱着代码走来了,

话不多说,开搞

<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;
}

表格透明

到此为止,结束

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于 el-table 表格分页且可以拖拽的功能,你可以使用 Element UI 提供的 el-pagination 分页组件和 el-table-column 的 sortable 属性来实现。以下是一个示例代码: ```html <template> <el-table :data="tableData" :default-sort="{ prop: 'date', order: 'descending' }" :row-key="row => row.id" :header-cell-style="{ 'background-color': '#f5f7fa', 'color': '#333' }" style="width: 100%;" @sort-change="handleSortChange" > <el-table-column prop="name" label="Name" sortable width="180" ></el-table-column> <el-table-column prop="date" label="Date" sortable width="180" ></el-table-column> <el-table-column prop="address" label="Address" width="180" ></el-table-column> <el-table-column label="Actions" width="120" > <template slot-scope="scope"> <span class="action-button">Edit</span> <span class="action-button">Delete</span> </template> </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="margin-top: 20px; text-align: right;" ></el-pagination> </template> <script> export default { data() { return { tableData: [ { id: 1, name: 'John Doe', date: '2021-01-01', address: '123 Main St' }, { id: 2, name: 'Jane Smith', date: '2021-02-01', address: '456 Elm St' }, // more data... ], currentPage: 1, pageSize: 10, total: 20, }; }, methods: { handleSortChange(sort) { // 排序逻辑 console.log(sort); }, handleSizeChange(size) { // 每页显示条数改变逻辑 console.log(size); }, handleCurrentChange(page) { // 当前页码改变逻辑 console.log(page); }, }, }; </script> <style scoped> .action-button { color: #409eff; cursor: pointer; margin-right: 10px; } </style> ``` 在这个示例中,el-table 的数据通过 `tableData` 属性进行绑定,el-pagination 的当前页码、每页显示条数和总数分别绑定到 `currentPage`、`pageSize` 和 `total` 属性。你可以根据实际情况进行调整和修改。 需要注意的是,以上代码仅提供了分页和排序的基本实现,拖拽功能需要根据具体需求进行自定义开发,可以使用 Element UI 提供的 el-draggable 组件结合 el-table 实现拖拽功能。具体实现方式可以参考 Element UI 官方文档中的示例和说明。 希望这个示例可以帮助到你!如果有任何问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值