700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > Ant Design Vue数据表格 序号

Ant Design Vue数据表格 序号

时间:2022-01-03 20:54:53

相关推荐

Ant Design Vue数据表格 序号

参考:/qq_38344500/article/details/105995886

核心代码

<!-- 序号 --><span slot="num" slot-scope="text, record, index">{{ (pageParams.page-1) * pageParams.rows + parseInt(index)+1 }}</span>

{title: '序号',dataIndex: 'num',key: 'num', width: 50,align: 'center',fixed: true,scopedSlots: {customRender: 'num'}},

完整代码

<a-table:columns="columns":data-source="data":pagination="pagination":rowKey="(item) => item.id"@change="handleTableChange":scroll="{x:1500}"bordered><!-- 序号 --><span slot="num" slot-scope="text, record, index">{{ (pageParams.page-1) * pageParams.rows + parseInt(index)+1 }}</span><template slot="operation" slot-scope="text,item"><a-buttontype="primary"size="small"@click="showShow(item)"style="margin-left: 10px; font-size: 10px">查看</a-button><a-buttondisabled@click="cancel(item)"type="danger"size="small"style="margin-left: 10px; font-size: 10px">撤销</a-button></template></a-table>

const columns = [{title: '序号',dataIndex: 'num',key: 'num', width: 50,align: 'center',fixed: true,scopedSlots: {customRender: 'num'}},{title: "身份证",dataIndex: "idcard",align: "center",width: 250,},{title: "手机号",dataIndex: "tel",width: 300,align: "center",},{title: "车牌号",dataIndex: "ship",width: 300,align: "center",},{title: "车轴类型",dataIndex: "trucktype",width: 300,align: "center",},{title: "审核类型",dataIndex: "state",width: 300,align: "center",customRender: function (val) {if (val === 1) {return "未审核";} else if (val === 2) {return "已审核"}}},{title: "操作",dataIndex: "操作",align: "center",fixed: "right",width: 180,scopedSlots: {customRender: "operation"},},]export default {components: {edit},data() {return {pageParams: {ship: '',tel: '',state: 1, // 1:未审核 2:已审核page: 1,rows: 10,},showFlag_list: true,showFlag_edit: false,loading_sk: false,form: {},data: [],columns,pagination: {total: 0,current: 1,pageSize: 10, //每页中显示10条数据showSizeChanger: true,pageSizeOptions: ["10","20","50",], //每页中显示的数据showTotal: (total) => `共有 ${total} 条数据`, //分页中显示总的数据},};},methods: {// 搜索handleSearch() {this.pageParams.page = 1;this.loadData();},// 清空handleClear() {this.pageParams.tel = ''this.pageParams.ship = ''this.loadData();},// 分页handleTableChange(page, pageSize) {this.pageParams.page = page.current;this.pageParams.rows = page.pageSize;this.loadData();},// 加载数据loadData() {this.$myapi.api_kj_biz_car.page(this.pageParams).then((response) => {if (response.data.code === 1) {const result = response.data;console.log('result:', result)this.data = result.data.items;this.pagination.pageSize = result.data.rows;this.pagination.total = result.data.total;this.pagination.current = result.data.page;this.pageParams.page = result.data.page;this.pageParams.rows = result.data.rows;} else {console.log('查询到的数据为空')}});}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。