lzxevol 2019-12-06 18:18 采纳率: 50%
浏览 333

利用Props将表单中写的数据传入到一个组件中的数组中,点击提交没有反应,在线等,求救救孩子。

求大佬们帮忙看看,是哪儿出问题了

<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>
  • 写回答

1条回答 默认 最新

  • yhanw 2023-03-28 14:53
    关注

    img

    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题