vue3 ts elementui-plus 帮我写一个el-table表格代码,字段有序号,证件,证件姓名,证件有效期,证件影像,提交认证时间,通过时间,提交人,认证途径,操作按钮(分别是修改,协助认证),带分页
时间: 2024-05-28 20:08:36 浏览: 74
Vue3 框架 + Element-Plus 库 + mockjs 假数据 + vue3-demo + 环境已经配好拿来就用
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column prop="idCard" label="证件"></el-table-column>
<el-table-column prop="name" label="证件姓名"></el-table-column>
<el-table-column prop="validity" label="证件有效期"></el-table-column>
<el-table-column prop="image" label="证件影像"></el-table-column>
<el-table-column prop="submitTime" label="提交认证时间"></el-table-column>
<el-table-column prop="passTime" label="通过时间"></el-table-column>
<el-table-column prop="submitter" label="提交人"></el-table-column>
<el-table-column prop="approach" label="认证途径"></el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button type="primary" size="small" @click="handleEdit(scope.row)">修改</el-button>
<el-button type="success" size="small" @click="handleAssist(scope.row)">协助认证</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { ElTable, ElTableColumn, ElButton, ElPagination } from 'element-plus';
export default defineComponent({
components: {
ElTable,
ElTableColumn,
ElButton,
ElPagination,
},
data() {
return {
tableData: [], // 表格数据
currentPage: 1, // 当前页码
pageSize: 10, // 每页显示条数
total: 0, // 总条数
};
},
methods: {
handleEdit(row: any) {
// 处理修改操作
},
handleAssist(row: any) {
// 处理协助认证操作
},
handleSizeChange(val: number) {
this.pageSize = val;
this.fetchData();
},
handleCurrentChange(val: number) {
this.currentPage = val;
this.fetchData();
},
fetchData() {
// 发起数据请求
},
},
mounted() {
this.fetchData();
},
});
</script>
阅读全文