vue實現(xiàn)表單數(shù)據(jù)的增刪改功能
更新時間：2022年03月09日 09:20:31 作者：面壁思過程
這篇文章主要為大家詳細介紹了vue實現(xiàn)表單數(shù)據(jù)的增刪改功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(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>會員等級優(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è)計圖 真實用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)聽窗口變化或橫屏?xí)r
? ? ? ? ? ? window.addEventListener(resizeEvt, changeFontSize);
? ? ? ? ? ? //加載頁面觸發(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;
? ? ? ? }
?
? ? ? ? /* 第一項 */
? ? ? ? .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;
? ? ? ? }
?
? ? ? ? /* 第一項的第一個盒子 */
? ? ? ? .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>會員等級優(yōu)惠</p>
? ? ? ? ? ? ? ? <p>1.商戶可根據(jù)不同等級會員設(shè)置相應(yīng)的充值、購買優(yōu)惠；</p>
? ? ? ? ? ? ? ? <p> 2.會員等級優(yōu)惠生效設(shè)備：娃娃機、兌幣機、售貨機。</p>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="nav_box">
? ? ? ? ? ? ? ? <li :class="nav_index==0?'active':''" @click="tab(0)">選擇會員等級</li>
? ? ? ? ? ? ? ? <li :class="nav_index==1?'active':''" @click="tab(1)">添加會員等級</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>會員等級</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">兌幣機/娃娃機</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">售貨機</p>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="iscount">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 購買優(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">會員等級名稱 </div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="right">達到條件</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">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 累計消費
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <input class="input2" type="text" name="" id="" v-model="item.userLevelMoney"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 元達到
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <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>添加會員等級</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)的會員等級第一個
? ? ? ? ? ? userLevelId: 0, //默認(rèn)的會員id
? ? ? ? ? ? preferential: [], //優(yōu)惠數(shù)組
? ? ? ? ? ? discount: '', //設(shè)置的折扣 ?0-9.9
?
? ? ? ? ? ? add_level_members: [], //添加會員等級數(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() ? //重置會員數(shù)組
?
? ? ? ? ? ? },
? ? ? ? ? ? //選擇會員等級顯示不同的套餐
? ? ? ? ? ? choose(index, userLevelId) {
? ? ? ? ? ? ? ? let that = this;
? ? ? ? ? ? ? ? that.default_levelIndex = index;
? ? ? ? ? ? ? ? that.userLevelId = userLevelId;
? ? ? ? ? ? ? ? console.log(userLevelId);
? ? ? ? ? ? ? ? that.getinfo1(userLevelId);
? ? ? ? ? ? },
?
? ? ? ? ? ? //添加套餐
? ? ? ? ? ? addconditions() {
? ? ? ? ? ? ? ? let that = this;
? ? ? ? ? ? ? ? //根據(jù)后臺需要的值往數(shù)組里添加空數(shù)據(jù)
? ? ? ? ? ? ? ? that.preferential.push({
? ? ? ? ? ? ? ? ? ? userId: 80,
? ? ? ? ? ? ? ? ? ? userLevelId: that.userLevelId, //會員等級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)
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
? ? ? ? ? ? },
? ? ? ? ? ? //添加會員
? ? ? ? ? ? addLevelMembers() {
? ? ? ? ? ? ? ? let that = this;
? ? ? ? ? ? ? ? that.add_level_members.push({
? ? ? ? ? ? ? ? ? ? userLevelName: '',
? ? ? ? ? ? ? ? ? ? userLevelMoney: '',
? ? ? ? ? ? ? ? ? ? userLevelBuyDiscount: ''
? ? ? ? ? ? ? ? });
? ? ? ? ? ? },
? ? ? ? ? ? //刪除會員
? ? ? ? ? ? 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 //折扣價格
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
? ? ? ? ? ? },
?
?
? ? ? ? ? ? //新增一個會員
? ? ? ? ? ? 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>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot
本篇文章給大家通過代碼實例分析了vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot的相關(guān)知識，有這方面興趣的朋友參考下吧。2018-01-01
Vue?通過this.$emit()方法子組件向父組件傳值(步驟分享)
這篇文章主要介紹了Vue?this.$emit()方法通過子組件向父組件傳值,第一步在父組件中引入子組件，第二步子組件向父組件傳值，本文通過需要的朋友可以參考下2022-11-11
vue中展示、讀取.md?文件的方法(批量引入、自定義代碼塊高亮樣式)
這篇文章主要介紹了vue中展示、讀取.md?文件的方法(批量引入、自定義代碼塊高亮樣式),本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue+element實現(xiàn)錨點鏈接方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了Vue 使用html、css實現(xiàn)魚骨組件圖,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
本片文章主要寫了，Vue3開發(fā)時運用Vant UI庫的一些避坑點。讓有問題的小伙伴可以快速了解是為什么。也是給自己做一個記錄2023-04-04
這篇文章主要介紹了vue之父組件向子組件傳值并改變子組件的樣式,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue enter回車導(dǎo)致頁面刷新問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue2和Vue3在v-for遍歷時ref獲取dom節(jié)點的區(qū)別及說明
這篇文章主要介紹了Vue2和Vue3在v-for遍歷時ref獲取dom節(jié)點的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
ElementUI如何修改Dialog的標(biāo)題樣式
這篇文章主要介紹了ElementUI如何修改Dialog的標(biāo)題樣式問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10