求大佬们帮忙看看,是哪儿出问题了
<template>
<div>
<el-form ref="form" :model="form" label-width="80px" class="form-item-require-lable">
<el-form-item label="任务类型">
<el-select v-model="form.kind" placeholder="请选择您要新建的任务类型">
<el-option label="学习任务" value="xuexi"></el-option>
<el-option label="工作任务" value="gongzuo"></el-option>
<el-option label="生活任务" value="shenghuo"></el-option>
</el-select>
</el-form-item>
<el-form-item label="任务主题">
<el-input type="textarea" v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="任务时间">
<el-col :span="11">
<el-date-picker type="datetime" placeholder="选择任务开始日期时间" v-model="form.beginTime" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-date-picker type="datetime" placeholder="选择任务结束日期时间" v-model="form.endTime" style="width: 100%;"></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="任务内容">
<el-input type="textarea" v-model="form.content"></el-input>
</el-form-item>
<el-form-item label="任务标记">
<el-radio-group v-model="form.biaoji">
<el-radio label="重要任务" name="type"></el-radio>
<el-radio label="普通任务" name="type"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item >
<el-button type="primary" @click="resetForm(form)">取消</el-button>
<el-button type="success" @onclick="submitForm(form)">提交</el-button>
</el-form-item>
</el-form>
<el-dialog>
</el-dialog>
</div>
</template>
<script>
import Sousuo from './Sousuo.vue'
export default {
name: 'Xinjian',
components:{Sousuo},
props: ['value'], //xinjian_value
data() {
return {
form: { //form要与前面的定义一样
kind: '',
name: '',
beginTime: '',
endTime: '',
content: '',
biaoji: '',
}
}
},
methods: {
SubmitForm(form) {
/*this.$api.SubmitForm(data =>{
window.location.reload();
},*/
//this.props.close();
this.xinjian0=false;
var data={
kind:form.kind,
name:form.name,
beginTime:form.beginTime,
endTime:form.endTime,
content:form.content,
biaoji:form.biaoji,
}
this.tableData.push(data)
this.$emit('update',tableData);
console.log('submit!');
},
}
}
</script>
<style scoped>
.form-item-require-label{
margin: center,
}
</style>
<template>
<div>
<el-table
:data="tabledata"
stripe
style="width: 100%;">
<el-table-column
prop="kind"
label="任务类型"
width="160"
style="height:30px"
>
</el-table-column>
<el-table-column
prop="name"
label="任务标题"
width="160"
style="height:30px">
</el-table-column>
<el-table-column
prop="beginTime"
label="起始时间"
width="160"
style="height:30px">
</el-table-column>
<el-table-column
prop="endTime"
label="结束时间"
width="160"
style="height:30px">
</el-table-column>
<el-table-column
prop="content"
label="任务内容"
width="160"
style="height:30px">
</el-table-column>
<el-table-column
prop="biaoji"
label="任务标记"
width="160"
style="height:30px">
</el-table-column>
<el-table-column
prop="zhuangtai"
label="任务状态"
width="160"
style="height:30px">
<template slot-scope="scope">
<el-progress :text-inside="false" :stroke-width="8" :percentage="scope.row.percentage" :color="green">
</el-progress>
</template>
<!--el-progress :percentage="percentage" status="exception"></el-progress-->
</el-table-column>
<el-table-column label="操作" style="height:30px">
<template slot-scope="scope">
<el-button
size="mini" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
<el-button
@click="handleDelete(scope.$index, tabledata)" size="small">移除 </el-button>
<!--el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click.native.prevent="handleDelete(scope.$index, tableData)">删除</el-button><scope.row-->
</template>
</el-table-column>
</el-table>
<!--渲染v-for-->
<el-dialog title="编辑任务" :visible.sync="bianji0" :append-to-body="true">
<Bianjiform :bianjiformData.sync="tabledata" v-bind="tabledata"></Bianjiform>
</el-dialog>
<el-dialog title="新建任务" :visible.sync="xinjian0" :append-to-body="true">
<Xinjian :xinjian_value="value"></Xinjian>
</el-dialog>
</div>
</template>
<script>
import Bianjiform from './Bianjiform.vue'
import Xinjian from './Xinjian.vue'
export default {
components: {Bianjiform,Xinjian},
name: 'Taskform',
props:['message'],
data() {
return {
tabledata: [{
kind: '学习任务',
name: 'vue',
beginTime: '2016-05-02',
endTime: '2016-05-03',
content: '学习vue',
biaoji: '重要任务',
percentage: 50,
}, {
kind: '学习任务',
name: 'vue',
beginTime: '2016-05-02',
endTime: '2016-05-03',
content: '学习vue',
biaoji: '重要任务',
percentage: 2,
}, {
kind: '学习任务',
name: 'vue',
beginTime: '2016-05-02',
endTime: '2016-05-03',
content: '学习vue',
biaoji: '重要任务',
zhuangtai: '完成',
}, {
kind: '学习任务',
name: 'vue',
beginTime: '2016-05-02',
endTime: '2016-05-03',
content: '学习vue',
biaoji: '重要任务',
percentage: 50,
},{
kind: '学习任务',
name: 'vue',
beginTime: '2016-05-02',
endTime: '2016-05-03',
content: '学习vue',
biaoji: '重要任务',
percentage: 100,
},{
kind: '学习任务',
name: 'vue',
beginTime: '2016-05-02',
endTime: '2016-05-03',
content: '学习vue',
biaoji: '重要任务',
percentage: 90,
}],
form: {
kind: '',
name: '',
beginTime: '',
endTime: '',
content: '',
biaoji: '',
},
bianji0: false,
//xinjian0: false,
}
},
methods: {
handleEdit(index,row){
this.form={
kind:row.kind,
name:row.name,
beginTime:row.beginTime,
endTime:row.endTime,
content:row.content,
biaoji:row.biaoji,
}
this.bianji0=true;
//this.xinjian0=true;
},
handleDelete(index, row) {
//console.log(index, row);
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!',
});
row.splice(index,1);
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
}
}
</script>
<style scoped>
</style>