<template>
<el-dialog
title="收货地址"
:visible.sync="dialogFormVisible"
>
{{ form }}
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="100px"
>
<el-form-item
label="活动名称"
prop="name"
>
<el-input
v-model="form.name"
autocomplete="off"
/>
</el-form-item>
<el-form-item
label="活动区域"
prop="region"
>
<el-select
v-model="form.region"
placeholder="请选择活动区域"
>
<el-option
label="区域一"
value="shanghai"
/>
<el-option
label="区域二"
value="beijing"
/>
</el-select>
</el-form-item>
<el-form-item
label="活动性质"
prop="type"
>
<el-checkbox-group v-model="form.type">
<el-checkbox
label="美食/餐厅线上活动"
name="type"
/>
<el-checkbox
label="地推活动"
name="type"
/>
<el-checkbox
label="线下主题活动"
name="type"
/>
<el-checkbox
label="单纯品牌曝光"
name="type"
/>
</el-checkbox-group>
</el-form-item>
<el-button @click="handleAdd">
添加
</el-button>
<el-table
:data="form.tableData"
style="width: 100%"
>
<el-table-column
label="日期"
width="180"
>
<template slot-scope="scope">
<el-form-item
:prop="`tableData.${scope.$index}.date`"
label-width="0px"
:rules="rules.date"
>
<el-date-picker
v-model="scope.row.date"
type="date"
placeholder="选择日期"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column
label="姓名"
width="180"
>
<template slot-scope="scope">
<el-form-item
label-width="0px"
:prop="`tableData.${scope.$index}.compellation`"
:rules="rules.compellation"
>
<el-input v-model="scope.row.compellation" />
</el-form-item>
</template>
</el-table-column>
<el-table-column
label="年龄"
width="180"
>
<template slot-scope="scope">
<el-form-item
:prop="`tableData.${scope.$index}.age`"
label-width="0px"
:rules="rules.age"
>
<el-input v-model="scope.row.age" />
</el-form-item>
</template>
</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>
<div
slot="footer"
class="dialog-footer"
>
<el-button @click="dialogFormVisible = false">
取 消
</el-button>
<el-button
type="primary"
@click="confirmDialogFormVisible"
>
确 定
</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogFormVisible: true,
form: {
name: '',
region: '',
type: [],
tableData: [{
date: '',
compellation: '',
age: '',
}, {
date: '',
compellation: '',
age: '',
}],
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{
min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur',
},
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' },
],
type: [
{
type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change',
},
],
date: [
{ required: true, message: '请选择日期', trigger: 'change' },
],
compellation: [
{ required: true, message: '请输入姓名', trigger: 'change' },
],
age: [
{ required: true, message: '请输入年龄', trigger: 'change' },
],
},
};
},
methods: {
handleAdd() {
this.form.tableData.push({
date: '',
compellation: '',
age: '',
});
},
handleDelete(index, row) {
// console.log(index, row);
},
confirmDialogFormVisible() {
this.$refs.form.validate();
},
},
};
</script>
