Question

对于我的表，下面是显示其组件的代码：

<tbody style="border-bottom:#dbb100 1px"  v-for="(item,itm_index) in itemList" :key="itm_index.id" >
      <tr class="left-align">
           <td>{{item.name}}</td>
           <td v-for="(day, day_index) in days" :key="day_index.id" v-if="getTotalWork(itm_index, day_index)==true">{{newValue}}</td>
      </tr>
</tbody>

这是我的方法，应该更新其对应的行和列上的值。

getTotalWork(item_index, day_index) {
        let item = this.itemList[item_index];
        let day = this.days[day_index];
        let getDate = this.template.date;
        item = item.name;

        if(this.costList.length > 0){
            if(day < 10) day = '0'+day;
            var searchItem = this.costList.find(emp => emp.name === item);

                if(searchItem.name == item && searchItem.date ==this.monthYear+'-'+day){
                    this.newValue = searchItem.total_work;
                }else{
                    this.newValue = 0;
                }
        }
        return true;
    },

我现在的问题是，与其仅更新对应的列和行，不如使用一个项的值更新所有值。下面是示例输出：

我的问题是，如何仅根据item_index和day_index传递的值来更新相应的单元格。此参数的传递值是行标题和列标题。预期输出不应仅为499，应与其他数字一样。

任何想法我该如何实现？在这里停留了将近一天，在我的搜索中没有发现任何运气。

编辑

我不知道如何摆弄琴，但是当我console.log(this.costList)时，输出是这样的：

1:
   date: "2018-07-01"
   name:"John Doe"
   total_work:240
2:
   date: "2018-07-02"
   name:"John Doe"
   total_work:242
3:
   date: "2018-07-03"
   name:"John Doe"
   total_work:243

Answer 1

您应该使getTotalWork返回值并将其放在输出中：

<tbody style="border-bottom:#dbb100 1px"  v-for="(item,itm_index) in itemList" :key="itm_index.id" >
  <tr class="left-align">
       <td>{{item.name}}</td>
       <td v-for="(day, day_index) in days" :key="day_index.id">{{getTotalWork(itm_index, day_index)}}</td>
  </tr>
</tbody>

所以您的功能将如下所示：

getTotalWork(item_index, day_index) {
    let item = this.itemList[item_index];
    let day = this.days[day_index];
    let getDate = this.template.date;
    item = item.name;

    //MAX SINEV's answer  
    if(this.costList.length > 0){
        if(day < 10) day = '0'+day;
        var searchItem = this.costList.find(emp => emp.name === item);

            if(searchItem.name == item && searchItem.date ==this.monthYear+'-'+day){
                return searchItem.total_work;
            }else{
                return 0;
            }
    }
    return 0;
}

OP的修订版本：

if(this.costList.length > 0){

    if(day < 10){
        day = '0'+day;
    }
    //this.monthYear contains year and date in yyyy-mm format
    var searchItem = this.costList.find(emp => emp.name === item.name && emp.date == this.monthYear+'-'+day);

    if(typeof searchItem != 'undefined'){
        return searchItem.total_work;
    }
}
return 0;

如何根据vue js表中的行和列标题分配单元格值

1 个答案: