I want to make a page for new orders. There is a list of orders with table,. There is a button ruleForm.list.push (new line)
that has a new line in the interface. There are 3 problems with the following code?

1. is it okay to use new Detail () for new lines?
2. el-table-column prop= "ruleForm.list.product_id" this field, if selected, will change all rows to the same value? What"s going on?
The
3. scheduled date field is not displayed after selection, and why is it not displayed until a new row is added?

<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)
    },
},