<template> <div> <h1 style="margin:0;padding:10px 10px;font-size:20px;color:#333333;background-color:rgb(243,243,243);">建立滿贈促銷活動</h1> <div class="lit"> <template> <el-tabs v-model="activeName2" type="card" @tab-click="handleClick"> <el-tab-pane label="單品促銷" name="first"></el-tab-pane> <el-tab-pane label="類目促銷" name="second"></el-tab-pane> <el-tab-pane label="品牌促銷" name="third"></el-tab-pane> </el-tabs> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm"> <el-form-item label="促銷名稱：" prop="name"> <el-input style="width:50%;" v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="促銷規則：" required> <el-radio v-model="ruleForm.radio" label="1">備選項</el-radio> <el-radio v-model="ruleForm.radio" label="2">備選項</el-radio> </el-form-item> <el-form-item > <div v-if="ruleForm.radio==1" style="display:inline-block;"> 滿<el-input style="width:80px;margin:0 10px;" v-model="ruleForm.number"></el-input>元 </div> <div v-else-if="ruleForm.radio==2" style="display:inline-block;"> 滿<el-input style="width:80px;margin:0 10px;" v-model="ruleForm.number"></el-input>件 </div> <el-button style="margin:0 10px;" type="primary" @click="addshop">新增贈品</el-button> </el-form-item> <el-form-item> <el-table :data="this.$store.state.mad.addgoodslist" key='aTable' style="width: 100%"> <el-table-column label="商品圖片" width="180"> <template slot-scope="scope"> <img :src="scope.row.dataPic" class="imagelit" alt=""> </template> </el-table-column> <el-table-column label="商品編號" prop="goodsCode" width="180"> </el-table-column> <el-table-column label="商品名稱" prop="goodsName" width="180"> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">刪除</el-button> </template> </el-table-column> </el-table> </el-form-item> <el-form-item v-if="command=='first'" label="選擇貨品：" required> <el-button style="margin:0 10px;" type="primary" @click="goodssubmit">選擇參加促銷的貨品</el-button> <el-checkbox v-model="ruleForm.checked1">全場促銷（全場促銷可不指定貨品）</el-checkbox> </el-form-item> <el-form-item v-else-if="command=='second'" label="選擇類目：" required> <el-button style="margin:0 10px;" @click="categorysubmit" type="primary">選擇參加促銷的類目</el-button> <el-checkbox v-model="ruleForm.checked2">全場促銷（全場促銷可不指定貨品）</el-checkbox> </el-form-item> <el-form-item v-else-if="command=='third'" label="選擇品牌：" required> <el-button style="margin:0 10px;" @click="brandsubmit" type="primary">選擇參加促銷的品牌</el-button> <el-checkbox v-model="ruleForm.checked3">全場促銷（全場促銷可不指定貨品）</el-checkbox> </el-form-item> <el-form-item v-if="command=='first'" label="已選擇貨品：" required> <el-table :data="this.$store.state.mad.goodslist" key='firstTable' style="width:800"> <el-table-column label="商品圖片" width="180"> <template slot-scope="scope"> <img :src="scope.row.dataPic" class="imagelit" alt=""> </template> </el-table-column> <el-table-column label="商品編號" prop="goodsCode" width="180"> </el-table-column> <el-table-column label="商品名稱" prop="goodseName" width="180"> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">刪除</el-button> </template> </el-table-column> </el-table> </el-form-item> <el-form-item v-else-if="command=='second'" label="已選擇類目：" required> <div>123</div> <template> <el-table :data="this.$store.state.mad.categorylist" key='secondTable' style="width: 100%"> <el-table-column label="分類編號" prop="classtreeCode" width="180"> </el-table-column> <el-table-column label="" prop="" width="180"> </el-table-column> <el-table-column label="分類名稱" prop="classtreeName" width="180"> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">刪除</el-button> </template> </el-table-column> </el-table> </template> </el-form-item> <el-form-item v-else-if="command=='third'" label="已選擇品牌：" required> <el-table :data="this.$store.state.mad.brandslist" key='thirdTable' style="width: 100%"> <el-table-column label="品牌編號" prop="brandCode" width="180"> </el-table-column> <el-table-column width="180"> </el-table-column> <el-table-column label="品牌名稱" prop="brandName" width="180"> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">刪除</el-button> </template> </el-table-column> </el-table>
</el-form-item> <el-form-item label="開始時間：" required> <el-date-picker v-model="ruleForm.value1" type="datetime" prop="date1" placeholder="選擇開始時間"> </el-date-picker> </el-form-item> <el-form-item label="結束時間：" required> <el-date-picker v-model="ruleForm.value2" type="datetime" prop="date2" placeholder="選擇結束時間"> </el-date-picker> </el-form-item> <el-form-item label="活動站點" > <el-checkbox v-model="ruleForm.checkeds">WAP</el-checkbox> </el-form-item> <el-form-item label="促銷描述" prop="type"> <!-- //富文字選擇器 --> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">立即建立</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form> </template> <div> <!-- 新增贈品 --> <addshop></addshop> <!-- 選擇貨品 --> <shoppinggoods></shoppinggoods> <!-- 選擇類目 --> <shoppingcategory></shoppingcategory> <!-- 選擇品牌 --> <shoppingbrand></shoppingbrand> </div> </div> </div></template><script>import shoppinggoods from "./shoppinggoods";import shoppingcategory from "./shoppingcategory";import shoppingbrand from "./shoppingbrand";import addshop from "./addshop"; export default { components: { shoppinggoods, shoppingbrand, shoppingcategory, addshop }, data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀區金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀區金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀區金沙江路 1516 弄' }], activeName2: 'first', command:"first", ruleForm: { name: '', value1:"", value2:"", region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '', radio:"1", checked1:false, checked2:false, checked3:false, checkeds:true//活動站點 }, rules: { name: [ { required: true, message: '請輸入活動名稱', trigger: 'blur' }, { min: 3, max: 5, message: '長度在 3 到 5 個字元', trigger: 'blur' } ], date1: [ { type: 'date', required: true, message: '請選擇開始時間', trigger: 'change' } ], date2: [ { type: 'date', required: true, message: '請選擇結束時間', trigger: 'change' } ], type: [ { type: 'array', required: true, message: '請至少選擇一個活動性質', trigger: 'change' } ], resource: [ { required: true, message: '請選擇活動資源', trigger: 'change' } ], desc: [ { required: true, message: '請填寫活動形式', trigger: 'blur' } ] } }; }, methods: { addshop(){//新增贈品 this.$store.commit('addgoods',true); console.log(1); console.log(this.$store.state.mad.addgoodsdialogTableVisible); }, handleClick(tab, event) {//頭部點選切換 console.log(tab.name, event); this.command=tab.name; console.log("error"); }, submitForm(formName) {//立即建立 this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) {//重置 this.$refs[formName].resetFields(); }, handleDelete(index, row) {//刪除 console.log(index, row); }, goodssubmit(){//開啟促銷貨品列表 this.$store.commit('goodschange',true); console.log(1); console.log(this.$store.state.mad.goodsdialogTableVisible); }, categorysubmit(){//開啟促銷類目列表 this.$store.commit('categorychange',true); console.log(2); console.log(this.$store.state.mad.categorydialogTableVisible); }, brandsubmit(){//開啟促銷品牌列表 this.$store.commit('brandchange',true); console.log(3); console.log(this.$store.state.mad.branddialogTableVisible); } } };</script><style scoped> .lit{ padding:10px; } .imagelit{ width:100px; height:100px; }</style>本文主要設定到多個el-table報錯_self.$scopedSlots.default is not a function,此時的解決辦法是設定key=""