vue实现票价阶梯表，票价九九乘法表

本文主要是介绍vue实现票价阶梯表，票价九九乘法表，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

要求：
选择线路，点击票价配置，弹出页面，列出线路下的所有站点间的价格，如果没有设置，默认为0.可以修改。
最终实现效果：
在这里插入图片描述

核心代码如下：
在这里插入图片描述
解释一下：
siteArr和priceMap返回格式大体如下：
siteArr：[{siteId:‘1’,siteName:‘北京站’}，{siteId:‘2’,siteName:‘南京站’}，…]
priceMap: {‘1-2’: ‘1.11’, ‘1-3’: ‘2.22’, 2-3: 3.22 ,…}

样式如下：
在这里插入图片描述
本人后端开发，用了一天时间才把前后端开发完毕，特此记录一下

整体代码如下：（框架使用的是jeecg，组件使用的antdesigner，部分组件进行了封装）

<template><j-modal:title="title":width="900":visible="visible":confirmLoading="confirmLoading"switchFullscreen@ok="handleOk"@cancel="handleCancel"okText="确认"cancelText="取消"><a-card :bordered="false"><!-- table区域-begin --><div class="content"><div class="row" ><div class="col" style="width: 60px;background-color:#f0f0f0 "><b>序号</b></div><div class="col" style="background-color:#f0f0f0 "><b>站点</b></div><div class="col2"><b>票价（单位：元）</b></div></div><div class="row" v-for="(item, index) in siteArr" :key="item.id"><div class="col" style="width: 60px">{{item.orderNum}}</div><div class="col">{{item.siteName}}</div><div class="col" v-for="subItem in index" :key="subItem"><a-input-number :min="0" :max="1000" :precision="2"  :default-value="0.00"v-model = "priceMap[siteArr[subItem - 1].siteId + '-' + siteArr[index].siteId]" /></div><div class="col2">{{item.siteName}}</div></div></div></a-card></j-modal>
</template><script>
import '@/assets/less/TableExpand.less'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import ticketUrl from '@api/bus/ticketUrl'
import { getAction,postAction } from '@api/manage'export default {name: 'bus-ticket-price-modal',mixins: [JeecgListMixin],components: {},data() {return {title:'票价表设置',description: '票价管理页面',confirmLoading: false,visible: false,lineId:'',// 表头siteArr: [],priceMap: {},url: {list: ticketUrl.list,save: ticketUrl.save,},}},computed: {},created() {this.queryList()},methods: {showPopup(lineId) {this.queryList(lineId);//站点为空时，不弹出页面，给予提醒let intervel = setInterval(()=>{if(!this.loading){if(this.siteArr.length==0){this.$message.error("站点为空，请先维护站点信息！")}else{this.visible = true;this.lineId = lineId;}clearInterval(intervel)}},100)},queryList(lineId) {this.loading = truegetAction(this.url.list,{lineId:lineId }).then((res) => {if (res.success) {this.siteArr = res.result.siteArrthis.priceMap = res.result.priceMap} else {this.$message.warning(res.message)}}).finally(() => {this.loading = false})},handleCancel(){this.$emit('ok');this.visible = false;},handleOk(){this.$confirm({title: '提示',content: '确认要提交吗？',onOk: () => {postAction(this.url.save, {priceMap :this.priceMap,lineId:this.lineId}).then((res) => {if(res.success){this.$message.success(res.message);}else{this.$message.warning(res.message);}}).finally(()=>{this.handleCancel();})}})},}
}
</script>
<style scoped>
@import '~@assets/less/common.less';
.content{width: 100%;
}
.row{width: 100%;display: flex;justify-content: flex-start;
}
.col{width: 110px;height: 40px;border: 1px solid #ccc;display: flex;justify-content: center;align-items: center;
}
.col2{width: 120px;height: 40px;display: flex;justify-content: center;align-items: center;
}
</style>