vue實(shí)現(xiàn)表單數(shù)據(jù)的增刪改功能
更新時(shí)間：2022年03月09日 09:20:31 作者：面壁思過(guò)程
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表單數(shù)據(jù)的增刪改功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)表單數(shù)據(jù)增刪改功能的具體代碼，供大家參考，具體內(nèi)容如下
圖示如下:
<!DOCTYPE html>
<html lang="en">
?
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>會(huì)員等級(jí)優(yōu)惠</title>
? ? <script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
? ? <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
?
? ? <script>
? ? ? ? //rem適配的js ? ?750的設(shè)計(jì)圖 真實(shí)用7.5rem表示
? ? ? ? (function () {
? ? ? ? ? ? let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
? ? ? ? ? ? ? ? doc = document.documentElement;
?
? ? ? ? ? ? function changeFontSize() {
? ? ? ? ? ? ? ? let clientWidth = doc.offsetWidth,
? ? ? ? ? ? ? ? ? ? scale = clientWidth / 750;
? ? ? ? ? ? ? ? doc.style.fontSize = scale * 100 + 'px';
? ? ? ? ? ? }
? ? ? ? ? ? //監(jiān)聽(tīng)窗口變化或橫屏?xí)r
? ? ? ? ? ? window.addEventListener(resizeEvt, changeFontSize);
? ? ? ? ? ? //加載頁(yè)面觸發(fā)
? ? ? ? ? ? document.addEventListener('DOMContentLoaded', changeFontSize);
? ? ? ? })();
? ? </script>
?
? ? <style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
?
? ? ? ? li {
? ? ? ? ? ? list-style: none;
? ? ? ? }
?
? ? ? ? body {
? ? ? ? ? ? font-size: 0.32rem;
? ? ? ? ? ? background: #f0eff5;
?
? ? ? ? }
?
? ? ? ? input {
? ? ? ? ? ? border: none;
? ? ? ? ? ? outline: none;
? ? ? ? }
?
? ? ? ? .del {
? ? ? ? ? ? width: 1rem;
? ? ? ? ? ? line-height: 0.55rem;
? ? ? ? ? ? background: rgba(0, 153, 255, 1);
? ? ? ? ? ? color: #fff;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? border: none;
? ? ? ? ? ? border-radius: 0.1rem;
? ? ? ? ? ? margin-left: 0.2rem;
?
? ? ? ? }
?
? ? ? ? /* 頂部信息 */
?
? ? ? ? .top {
? ? ? ? ? ? /* width: 100%; */
? ? ? ? ? ? /* height:1.78rem; */
? ? ? ? ? ? background: rgba(224, 242, 255, 1);
? ? ? ? ? ? padding: 0.2rem;
? ? ? ? ? ? font-size: 0.3rem;
? ? ? ? ? ? color: #0099FF;
? ? ? ? }
?
? ? ? ? .top p {
? ? ? ? ? ? margin-bottom: 0.14rem;
? ? ? ? }
?
? ? ? ? /* 切換欄 */
? ? ? ? .nav_box {
? ? ? ? ? ? line-height: 0.86rem;
? ? ? ? ? ? display: flex;
? ? ? ? ? ? flex-wrap: nowrap;
? ? ? ? ? ? background: #fff;
? ? ? ? ? ? margin-bottom: 0.02rem;
? ? ? ? }
?
? ? ? ? .nav_box li {
? ? ? ? ? ? flex: 1;
? ? ? ? ? ? text-align: center;
? ? ? ? }
?
? ? ? ? .nav_box li.active {
? ? ? ? ? ? background: rgba(0, 153, 255, 1);
? ? ? ? ? ? color: #fff;
? ? ? ? }
?
? ? ? ? /* 第一項(xiàng) */
? ? ? ? .nav1 {}
?
? ? ? ? .nav1 .bottom_btn {
? ? ? ? ? ? line-height: 0.77rem;
? ? ? ? ? ? background: rgba(0, 153, 255, 1);
? ? ? ? ? ? color: #fff;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? position: fixed;
? ? ? ? ? ? bottom: 0;
? ? ? ? ? ? left: 0;
? ? ? ? ? ? right: 0;
? ? ? ? }
?
? ? ? ? /* 第一項(xiàng)的第一個(gè)盒子 */
? ? ? ? .nav1 .concent .box1 {
? ? ? ? ? ? display: flex;
? ? ? ? ? ? flex-wrap: wrap;
? ? ? ? ? ? background: #fff;
? ? ? ? ? ? padding: 0.2rem 0 0 0.2rem;
? ? ? ? ? ? margin-bottom: 0.2rem;
? ? ? ? }
?
? ? ? ? .nav1 .concent .box1 .list {
? ? ? ? ? ? width: 1.68rem;
? ? ? ? ? ? line-height: 0.74rem;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? background: rgba(243, 243, 243, 1);
? ? ? ? ? ? border-radius: 0.1rem;
? ? ? ? ? ? margin-right: 0.12rem;
? ? ? ? ? ? margin-bottom: 0.2rem;
? ? ? ? }
?
? ? ? ? .nav1 .concent .box1 .list.active {
? ? ? ? ? ? background: rgba(0, 153, 255, 1);
? ? ? ? ? ? color: #fff;
? ? ? ? }
?
? ? ? ? .nav1 .concent .box1 .list:nth-of-type(4n) {
? ? ? ? ? ? margin-right: 0;
? ? ? ? }
?
? ? ? ? .nav1 .concent .box1 .addmembers {
? ? ? ? ? ? font-size: 0.26rem;
? ? ? ? ? ? color: rgba(160, 214, 255, 1);
? ? ? ? }
?
? ? ? ? .nav1 .concent .box1 .addmembers .add_ico {
? ? ? ? ? ? /* margin-right: 0.007rem; */
? ? ? ? }
?
? ? ? ? .nav1 .concent .box2 {}
?
? ? ? ? .nav1 .concent .box2 .titele {
? ? ? ? ? ? padding-left: 0.2rem;
? ? ? ? ? ? line-height: 0.7rem;
? ? ? ? ? ? background: #fff;
? ? ? ? ? ? border-bottom: 1px solid rgba(205, 205, 205, 1);
? ? ? ? }
?
? ? ? ? .nav1 .concent .box2 .info .chi_info {
? ? ? ? ? ? background: #fff;
? ? ? ? ? ? padding: 0.14rem 0.2rem;
? ? ? ? ? ? margin-bottom: 0.1rem;
? ? ? ? }
?
? ? ? ? .nav1 .concent .box2 .info .chi_info .bold_text {
? ? ? ? ? ? font-weight: bold;
? ? ? ? ? ? color: rgba(51, 51, 51, 1);
? ? ? ? ? ? margin-bottom: 0.22rem;
? ? ? ? }
?
? ? ? ? .nav1 .concent .box2 .info .chi_info1 {
? ? ? ? ? ? padding-bottom: 0.3rem;
? ? ? ? }
?
? ? ? ? .nav1 .concent .box2 .info .chi_info1 .li_box {
? ? ? ? ? ? font-size: 0.28rem;
? ? ? ? }
?
? ? ? ? .nav1 .concent .box2 .info .chi_info1 .li_box .li {
? ? ? ? ? ? display: flex;
? ? ? ? ? ? flex-wrap: nowrap;
? ? ? ? ? ? margin-bottom: 0.2rem;
? ? ? ? }
?
? ? ? ? .nav1 .concent .box2 .info .chi_info1 .li_box .li .count1 {
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? ? ? width: 1.2rem;
? ? ? ? ? ? height: 0.56rem;
? ? ? ? ? ? border: 1px solid rgba(0, 153, 255, 1);
? ? ? ? ? ? margin: 0 0.2rem;
? ? ? ? ? ? padding-left: 0.1rem;
? ? ? ? }
?
? ? ? ? .nav1 .concent .box2 .info .chi_info1 .addconditions {
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? color: rgba(0, 153, 255, 1);
? ? ? ? ? ? font-size: 0.28rem;
? ? ? ? ? ? margin-top: 0.28rem;
? ? ? ? }
?
? ? ? ? .nav1 .concent .box2 .info .chi_info1 .addconditions .add_ico {
? ? ? ? ? ? /* margin: 0.05rem; */
? ? ? ? }
?
? ? ? ? .nav1 .concent .box2 .info .chi_info1 .firm_btn {
? ? ? ? ? ? display: flex;
? ? ? ? ? ? justify-content: flex-end;
? ? ? ? }
?
? ? ? ? .nav1 .concent .box2 .info .chi_info1 .firm_btn .btn {
? ? ? ? ? ? width: 1.2rem;
? ? ? ? ? ? line-height: 0.66rem;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? background: rgba(0, 153, 255, 1);
? ? ? ? ? ? color: #fff;
? ? ? ? ? ? border-radius: 0.33rem;
? ? ? ? }
?
?
? ? ? ? .nav1 .concent .box2 .info .chi_info2 {}
?
? ? ? ? .nav1 .concent .box2 .info .chi_info2 .iscount {}
?
? ? ? ? .nav1 .concent .box2 .info .chi_info2 .iscount .count1 {
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? ? ? width: 1.2rem;
? ? ? ? ? ? height: 0.56rem;
? ? ? ? ? ? border: 1px solid rgba(0, 153, 255, 1);
? ? ? ? ? ? margin: 0 0.2rem;
? ? ? ? ? ? padding-left: 0.1rem;
? ? ? ? }
?
? ? ? ? .nav2 .info {
? ? ? ? ? ? padding: 0.2rem;
? ? ? ? ? ? background: #fff;
? ? ? ? }
?
? ? ? ? .nav2 .info .topbox .li {
? ? ? ? ? ? display: flex;
? ? ? ? ? ? flex-wrap: nowrap;
? ? ? ? ? ? margin-bottom: 0.38rem;
? ? ? ? ? ? font-size: 0.28rem;
?
? ? ? ? }
?
? ? ? ? .nav2 .info .topbox .lastlist {
? ? ? ? ? ? font-size: 0.3rem;
? ? ? ? ? ? font-weight: bold;
? ? ? ? }
?
? ? ? ? .nav2 .info .topbox .lastlist .left {
? ? ? ? ? ? flex: 1;
? ? ? ? }
?
?
? ? ? ? .nav2 .info .topbox .lastlist .right {
? ? ? ? ? ? flex: 1;
? ? ? ? }
?
? ? ? ? .nav2 .info .topbox .li .left {}
?
? ? ? ? .nav2 .info .topbox .li .right {
? ? ? ? ? ? width: auto;
? ? ? ? }
?
? ? ? ? .nav2 .info .topbox .li .input1 {
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? ? ? padding-left: 0.1rem;
? ? ? ? ? ? width: 1.6rem;
? ? ? ? ? ? height: 0.56rem;
? ? ? ? ? ? border: 1px solid rgba(0, 153, 255, 1);
? ? ? ? ? ? margin: 0 0.2rem;
? ? ? ? }
?
? ? ? ? .nav2 .info .topbox .li .input2 {
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? ? ? padding-left: 0.1rem;
? ? ? ? ? ? width: 1.27rem;
? ? ? ? ? ? height: 0.56rem;
? ? ? ? ? ? border: 1px solid rgba(0, 153, 255, 1);
? ? ? ? ? ? margin: 0 0.2rem;
? ? ? ? }
?
? ? ? ? .nav2 .info .addconditions {
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? color: rgba(0, 153, 255, 1);
? ? ? ? ? ? font-size: 0.28rem;
? ? ? ? ? ? margin-top: 0.28rem;
? ? ? ? }
?
? ? ? ? .nav2 .info .addconditions .add_ico {
? ? ? ? ? ? /* margin: 0.05rem; */
? ? ? ? }
?
? ? ? ? .nav2 .info .firm_btn {
? ? ? ? ? ? display: flex;
? ? ? ? ? ? justify-content: flex-end;
? ? ? ? }
?
? ? ? ? .nav2 .info .firm_btn .btn {
? ? ? ? ? ? width: 1.2rem;
? ? ? ? ? ? line-height: 0.66rem;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? background: rgba(0, 153, 255, 1);
? ? ? ? ? ? color: #fff;
? ? ? ? ? ? border-radius: 0.33rem;
? ? ? ? }
?
? ? ? ? /* 彈框 */
? ? ? ? .mask {
? ? ? ? ? ? position: fixed;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? left: 0;
? ? ? ? ? ? bottom: 0;
? ? ? ? ? ? top: 0;
? ? ? ? ? ? background: rgba(0, 0, 0, 0.5);
? ? ? ? }
?
? ? ? ? .model {
? ? ? ? ? ? position: fixed;
? ? ? ? ? ? width: 5.06rem;
? ? ? ? ? ? height: 3rem;
? ? ? ? ? ? top: 50%;
? ? ? ? ? ? left: 50%;
? ? ? ? ? ? border-radius: 20px;
? ? ? ? ? ? transform: translate(-50%, -50%);
? ? ? ? ? ? background: #fff;
? ? ? ? }
? ? </style>
</head>
?
<body>
? ? <div id="app">
? ? ? ? <div class="page">
? ? ? ? ? ? <div class="top">
? ? ? ? ? ? ? ? <p>會(huì)員等級(jí)優(yōu)惠</p>
? ? ? ? ? ? ? ? <p>1.商戶(hù)可根據(jù)不同等級(jí)會(huì)員設(shè)置相應(yīng)的充值、購(gòu)買(mǎi)優(yōu)惠；</p>
? ? ? ? ? ? ? ? <p> 2.會(huì)員等級(jí)優(yōu)惠生效設(shè)備：娃娃機(jī)、兌幣機(jī)、售貨機(jī)。</p>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="nav_box">
? ? ? ? ? ? ? ? <li :class="nav_index==0?'active':''" @click="tab(0)">選擇會(huì)員等級(jí)</li>
? ? ? ? ? ? ? ? <li :class="nav_index==1?'active':''" @click="tab(1)">添加會(huì)員等級(jí)</li>
? ? ? ? ? ? </div>
?
? ? ? ? ? ? <div class="nav1" v-show='nav_index==0'>
? ? ? ? ? ? ? ? <div class="concent">
? ? ? ? ? ? ? ? ? ? <div class="box1">
? ? ? ? ? ? ? ? ? ? ? ? <li class="list" :class="default_levelIndex==index?'active':''"
? ? ? ? ? ? ? ? ? ? ? ? ? ? v-for="(item,index) in level_members" :key='index' @click="choose(index,item.userLevelId)">
? ? ? ? ? ? ? ? ? ? ? ? ? ? {{item.userLevelName}}</li>
?
? ? ? ? ? ? ? ? ? ? ? ? <li class="list addmembers" @click="tab(1)">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <span class="add_ico">+</span>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <span>會(huì)員等級(jí)</span>
? ? ? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? </div>
?
? ? ? ? ? ? ? ? ? ? <div class="box2">
? ? ? ? ? ? ? ? ? ? ? ? <p class="titele">優(yōu)惠設(shè)置</p>
? ? ? ? ? ? ? ? ? ? ? ? <div class="info">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="chi_info chi_info1">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <p class="bold_text">兌幣機(jī)/娃娃機(jī)</p>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="li_box">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li class="li" v-for="(item,index) in preferential" :key='index'>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 單筆充值滿
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <input class="count1" type="text" name="" id=""
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? oninput="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? v-model="item.userLevelPayMoney">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 元再送
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <input class="count1" type="text" name="" id=""
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? oninput="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? v-model="item.userLevelGivingMoney">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 幣
?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <button class="del"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? @click="delConditions(index,item.userLevelDiscountId)">刪除</button>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="addconditions" @click="addconditions()">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span class="add_ico">+</span>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span>添加優(yōu)惠條件</span>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <!-- <div class="firm_btn">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="btn">確定</div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div> -->
? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
?
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="chi_info chi_info2">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <p class="bold_text">售貨機(jī)</p>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="iscount">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 購(gòu)買(mǎi)優(yōu)惠折扣
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <input class="count1" type="number" name="" id="" v-model="discount" min='1'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? max='9.9' step="0.01">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 折
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? </div>
?
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div class="kong" style="height: 0.77rem;width:100%"></div>
?
? ? ? ? ? ? ? ? <div class="bottom_btn" @click="save()">保存設(shè)置</div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="nav2" v-show='nav_index==1'>
? ? ? ? ? ? ? ? <div class="info">
? ? ? ? ? ? ? ? ? ? <div class="topbox">
?
? ? ? ? ? ? ? ? ? ? ? ? <li class="li lastlist">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="left">會(huì)員等級(jí)名稱(chēng) </div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="right">達(dá)到條件</div>
? ? ? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? ? ? <li class="li" v-for="(item,index) in add_level_members" :key='index'>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="left">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <input class="input1" type="text" v-model="item.userLevelName"></div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="right">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 累計(jì)消費(fèi)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <input class="input2" type="text" name="" id="" v-model="item.userLevelMoney"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 元達(dá)到
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <button class="del" @click="delLevelMembers(nav_index)"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? v-show="!item.userLevelId">刪除</button>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? </div>
?
? ? ? ? ? ? ? ? ? ? <div class="addconditions" @click="addLevelMembers()">
? ? ? ? ? ? ? ? ? ? ? ? <span class="add_ico">+</span>
? ? ? ? ? ? ? ? ? ? ? ? <span>添加會(huì)員等級(jí)</span>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? <div class="firm_btn">
? ? ? ? ? ? ? ? ? ? ? ? <div class="btn" @click="addLevel()">確定</div>
? ? ? ? ? ? ? ? ? ? </div>
?
? ? ? ? ? ? ? ? </div>
?
? ? ? ? ? ? </div>
? ? ? ? </div>
?
? ? </div>
?
</body>
?
<script>
? ? var app = new Vue({
? ? ? ? el: '#app',
? ? ? ? data: {
? ? ? ? ? ? nav_index: 0, //默認(rèn)的nav切換
? ? ? ? ? ? level_members: [], //可選擇的數(shù)組 ? {userLevelId: 1, userLevelName: "普通", userLevelMoney: 20}
? ? ? ? ? ? default_levelIndex: 0, //默認(rèn)的會(huì)員等級(jí)第一個(gè)
? ? ? ? ? ? userLevelId: 0, //默認(rèn)的會(huì)員id
? ? ? ? ? ? preferential: [], //優(yōu)惠數(shù)組
? ? ? ? ? ? discount: '', //設(shè)置的折扣 ?0-9.9
?
? ? ? ? ? ? add_level_members: [], //添加會(huì)員等級(jí)數(shù)組
? ? ? ? ? ? model_userLevelDiscountId: '',
? ? ? ? ? ? model_userLevelIndex: 0,
? ? ? ? ? ? model_IsShow: false,
? ? ? ? },
? ? ? ? mounted() {
? ? ? ? ? ? this.getinfo();
? ? ? ? ? ? // this.getinfo1();
? ? ? ? },
?
? ? ? ? methods: {
? ? ? ? ? ? //切換tab
? ? ? ? ? ? tab(index) {
? ? ? ? ? ? ? ? let that = this;
? ? ? ? ? ? ? ? that.nav_index = index;
? ? ? ? ? ? ? ? that.getinfo() ? //重置會(huì)員數(shù)組
?
? ? ? ? ? ? },
? ? ? ? ? ? //選擇會(huì)員等級(jí)顯示不同的套餐
? ? ? ? ? ? choose(index, userLevelId) {
? ? ? ? ? ? ? ? let that = this;
? ? ? ? ? ? ? ? that.default_levelIndex = index;
? ? ? ? ? ? ? ? that.userLevelId = userLevelId;
? ? ? ? ? ? ? ? console.log(userLevelId);
? ? ? ? ? ? ? ? that.getinfo1(userLevelId);
? ? ? ? ? ? },
?
? ? ? ? ? ? //添加套餐
? ? ? ? ? ? addconditions() {
? ? ? ? ? ? ? ? let that = this;
? ? ? ? ? ? ? ? //根據(jù)后臺(tái)需要的值往數(shù)組里添加空數(shù)據(jù)
? ? ? ? ? ? ? ? that.preferential.push({
? ? ? ? ? ? ? ? ? ? userId: 80,
? ? ? ? ? ? ? ? ? ? userLevelId: that.userLevelId, //會(huì)員等級(jí)id
? ? ? ? ? ? ? ? ? ? userLevelPayMoney: '',
? ? ? ? ? ? ? ? ? ? userLevelGivingMoney: '',
? ? ? ? ? ? ? ? ? ? userLevelBuyDiscount: ''
? ? ? ? ? ? ? ? });
? ? ? ? ? ? },
? ? ? ? ? ? //刪除套餐
? ? ? ? ? ? delConditions(index, userLevelDiscountId) {
? ? ? ? ? ? ? ? let that = this;
? ? ? ? ? ? ? ? that.model_userLevelDiscountId = userLevelDiscountId;
? ? ? ? ? ? ? ? that.model_userLevelIndex = index;
? ? ? ? ? ? ? ? $.ajax({
? ? ? ? ? ? ? ? ? ? type: 'POST',
? ? ? ? ? ? ? ? ? ? url: '/delectDiscount',
? ? ? ? ? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? ? ? ? ? userLevelDiscountId: that.model_userLevelDiscountId
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? success: function (data) {
? ? ? ? ? ? ? ? ? ? ? ? if (data.code == "100") {
? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log('刪除成功')
? ? ? ? ? ? ? ? ? ? ? ? ? ? that.preferential.splice(that.model_userLevelIndex, 1)
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
? ? ? ? ? ? },
? ? ? ? ? ? //添加會(huì)員
? ? ? ? ? ? addLevelMembers() {
? ? ? ? ? ? ? ? let that = this;
? ? ? ? ? ? ? ? that.add_level_members.push({
? ? ? ? ? ? ? ? ? ? userLevelName: '',
? ? ? ? ? ? ? ? ? ? userLevelMoney: '',
? ? ? ? ? ? ? ? ? ? userLevelBuyDiscount: ''
? ? ? ? ? ? ? ? });
? ? ? ? ? ? },
? ? ? ? ? ? //刪除會(huì)員
? ? ? ? ? ? delLevelMembers(index) {
? ? ? ? ? ? ? ? let that = this;
? ? ? ? ? ? ? ? that.add_level_members.splice(index, 1)
? ? ? ? ? ? },
? ? ? ? ? ? //獲取信息
? ? ? ? ? ? getinfo() {
? ? ? ? ? ? ? ? let that = this;
? ? ? ? ? ? ? ? $.ajax({
? ? ? ? ? ? ? ? ? ? type: 'GET',
? ? ? ? ? ? ? ? ? ? url: '/getUserLevelList',
? ? ? ? ? ? ? ? ? ? success: function (data) {
? ? ? ? ? ? ? ? ? ? ? ? if (data.code == "100") {
? ? ? ? ? ? ? ? ? ? ? ? ? ? that.level_members = data.extend.list;
? ? ? ? ? ? ? ? ? ? ? ? ? ? that.add_level_members = data.extend.list;
? ? ? ? ? ? ? ? ? ? ? ? ? ? that.userLevelId = data.extend.list[0].userLevelId;
? ? ? ? ? ? ? ? ? ? ? ? ? ? that.getinfo1(data.extend.list[0].userLevelId)
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
? ? ? ? ? ? },
?
? ? ? ? ? ? getinfo1(userLevelId) {
? ? ? ? ? ? ? ? let that = this;
? ? ? ? ? ? ? ? $.ajax({
? ? ? ? ? ? ? ? ? ? type: 'POST',
? ? ? ? ? ? ? ? ? ? headers: {
? ? ? ? ? ? ? ? ? ? ? ? "Content-Type": "application/json"
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? url: '/getUserLevelByLevelId',
? ? ? ? ? ? ? ? ? ? data: JSON.stringify({
? ? ? ? ? ? ? ? ? ? ? ? userId: "80",
? ? ? ? ? ? ? ? ? ? ? ? userLevelId: userLevelId
? ? ? ? ? ? ? ? ? ? }),
? ? ? ? ? ? ? ? ? ? success: function (data) {
? ? ? ? ? ? ? ? ? ? ? ? if (data.code == "100") {
? ? ? ? ? ? ? ? ? ? ? ? ? ? that.preferential = data.extend.data; //優(yōu)惠數(shù)組
? ? ? ? ? ? ? ? ? ? ? ? ? ? that.discount = data.extend.data[0].userLevelBuyDiscount //折扣價(jià)格
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
? ? ? ? ? ? },
?
?
? ? ? ? ? ? //新增一個(gè)會(huì)員
? ? ? ? ? ? addLevel() {
? ? ? ? ? ? ? ? let that = this;
? ? ? ? ? ? ? ? console.log(that.add_level_members);
?
? ? ? ? ? ? ? ? for (let i = 0; i < that.add_level_members.length; i++) {
? ? ? ? ? ? ? ? ? ? if (that.add_level_members[i].userLevelMoney === '' || that.add_level_members[i]
? ? ? ? ? ? ? ? ? ? ? ? .userLevelName === '') {
? ? ? ? ? ? ? ? ? ? ? ? console.log('不能輸入空值')
? ? ? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? $.ajax({
? ? ? ? ? ? ? ? ? ? type: 'POST',
? ? ? ? ? ? ? ? ? ? headers: {
? ? ? ? ? ? ? ? ? ? ? ? "Content-Type": "application/json"
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? url: '/insertUserLevelList',
?
? ? ? ? ? ? ? ? ? ? data: JSON.stringify(that.add_level_members),
? ? ? ? ? ? ? ? ? ? success: function (data) {
? ? ? ? ? ? ? ? ? ? ? ? if (data.code == "100") {
? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(data);
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
?
? ? ? ? ? ? },
?
? ? ? ? ? ? //保存設(shè)置按鈕
? ? ? ? ? ? save() {
? ? ? ? ? ? ? ? let that = this;
? ? ? ? ? ? ? ? console.log(that.preferential)
? ? ? ? ? ? ? ? for (let i = 0; i < that.preferential.length; i++) {
? ? ? ? ? ? ? ? ? ? that.preferential[i].userLevelBuyDiscount = that.discount; //添加折扣字段
? ? ? ? ? ? ? ? ? ? if (that.preferential[i].userLevelGivingMoney === '' || that.preferential[i]
? ? ? ? ? ? ? ? ? ? ? ? .userLevelPayMoney === '' || that.preferential[i].userLevelBuyDiscount === '') {
? ? ? ? ? ? ? ? ? ? ? ? console.log('不能輸入空值')
? ? ? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? ? $.ajax({
? ? ? ? ? ? ? ? ? ? type: 'POST',
? ? ? ? ? ? ? ? ? ? headers: {
? ? ? ? ? ? ? ? ? ? ? ? "Content-Type": "application/json"
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? url: '/updateDiscounts', //updateDiscountList
? ? ? ? ? ? ? ? ? ? data: JSON.stringify(that.preferential),
? ? ? ? ? ? ? ? ? ? success: function (data) {
? ? ? ? ? ? ? ? ? ? ? ? if (data.code == "100") {
? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(data);
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
?
? ? ? ? }
?
?
? ? })
</script>
</html>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中foreach數(shù)組與js中遍歷數(shù)組的寫(xiě)法說(shuō)明
這篇文章主要介紹了Vue中foreach數(shù)組與js中遍歷數(shù)組的寫(xiě)法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-06-06
淺談在vue-cli3項(xiàng)目中解決動(dòng)態(tài)引入圖片img404的問(wèn)題
這篇文章主要介紹了淺談在vue-cli3項(xiàng)目中解決動(dòng)態(tài)引入圖片img404的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
使用vue-router在Vue頁(yè)面之間傳遞數(shù)據(jù)的方法
這篇文章主要介紹了使用vue-router在Vue頁(yè)面之間傳遞數(shù)據(jù)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了Vue腳手架中的 render 理解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-10-10
這篇文章主要介紹了vue?雙向綁定問(wèn)題$emit無(wú)效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue 的鉤子函數(shù)，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
vue中關(guān)于computed的this指向問(wèn)題
這篇文章主要介紹了vue中關(guān)于computed的this指向問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue項(xiàng)目啟動(dòng)白屏問(wèn)題的幾種解決辦法
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目啟動(dòng)白屏問(wèn)題的幾種解決辦法,Vue項(xiàng)目打包后出現(xiàn)白屏的可能原因有很多,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue路由跳轉(zhuǎn)打開(kāi)新窗口(window.open())和關(guān)閉窗口(window.close())
這篇文章主要介紹了vue路由跳轉(zhuǎn)打開(kāi)新窗口(window.open())和關(guān)閉窗口(window.close())問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue-cli腳手架安裝，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04