vue element table 编辑模式下的日期组件无法显示

Question

我想做一个新增订单的页面， 订单有明细表用table， 在界面里有个新增一行的按钮ruleForm.list.push(新行)
下面代码有3个问题？

1. 新行用new Detail() 这样行吗？
2. el-table-column prop="ruleForm.list.product_id" 这个字段， 选了会把所有的行都变成同一个值？ 这是什么情况？
3. 计划日期这个字段， 选择完后不显示， 直到新增一行才显示出来 什么原因？

<el-table
          :data="ruleForm.list"
          border highlight-current-row 
          style="width: 100%">
          
          //这个字段， 选了会把所有的行都变成同一个值？ 这是什么情况？
<el-table-column prop="ruleForm.list.product_id" label="商品名称" width="200px">
            <template slot-scope="scope">
              <el-select v-model="ruleForm.list.product_id" filterable clearable placeholder="输入商品名称" >
                <el-option v-for="item in products" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </template>            
          </el-table-column>         

//选择完后不显示，  直到新增一行才显示出来  什么原因？
<el-table-column prop="plan_date" label="计划时间" width="170">
            <template slot-scope="scope">
              <el-date-picker v-model="scope.row.plan_date" type="date"  style="width:140px;">
              </el-date-picker>
            </template>
          </el-table-column> 

data() {
  ruleForm: {
        projectId: null,
        remark: null,
        list: []
 },    
},
methods: {
    Detail() {  //1. 新行用new Detail() 这样行吗？
      this.Detail.prototype.product_id = ''
      this.Detail.prototype.product_code = ''
      this.Detail.prototype.plan_date = null
      this.Detail.prototype.remark = ''
    },
    HandleAppendRow(index, row) {
      console.log('append new row!')
      const detail = new this.Detail()   
      this.ruleForm.list.push(this.detail)
    },
},