vue element传的值报_self.$scopedSlots.default is not a function,element组件在一个vue组件中重复使用

最新推荐文章于 2024-07-31 14:20:51 发布
beichen3997
最新推荐文章于 2024-07-31 14:20:51 发布
阅读量1w
点赞数
分类专栏： vue
本文链接：https://blog.csdn.net/beichen3997/article/details/80605699
版权
vue 专栏收录该内容
92 篇文章 2 订阅
订阅专栏
<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=""

确保每一个el-table具有唯一性<el-table key='firstTable' v-if="first"></el-table>