解决：Duplicate keys detected: ‘xxx‘. This may cause an update error

错误日志

翻译

错误代码

<el-table border :data="ruleDetailList" style="width: 100%; margin-top:10px" v-if="ruleDetailList.length">
  <el-table-column label="xxx" prop="parkName"></el-table-column>
  <el-table-column label="xxx" prop="channelName"></el-table-column>
  <el-table-column label="xxx" prop="authCycle" width="250px">
    <template slot-scope="scope">
      <div v-if="!scope.row.authCycle || JSON.parse(scope.row.authCycle).length === 0">未选择</div>
      // 因为table本身就会循环，这里又加了循环导致index重复 如:0,1,2,3,0,1,2,3。
      <template v-else v-for="(item, index) in JSON.parse(scope.row.authCycle)">
        <div v-if="item.week.length === 7" :key="index">{{ '每周' + ' ' + item.timeList[0].beginTime + '—' + item.timeList[0].expireTime }}</div>
        <div v-else-if="item.week.length === 0" :key="index">未选择</div>
        <div v-else v-for="(week, index) in item.week" :key="index">{{ '周' + weekName[week] + ' ' + item.timeList[0].beginTime + '—' + item.timeList[0].expireTime }}</div>
      </template>
    </template>
  </el-table-column>
</el-table>

解决

解决方法就是删掉 :key="index"

<el-table border :data="ruleDetailList" style="width: 100%; margin-top:10px" v-if="ruleDetailList.length">
  <el-table-column label="xxx" prop="parkName"></el-table-column>
  <el-table-column label="xxx" prop="channelName"></el-table-column>
  <el-table-column label="xxx" prop="authCycle" width="250px">
    <template slot-scope="scope">
      <div v-if="!scope.row.authCycle || JSON.parse(scope.row.authCycle).length === 0">未选择</div>
      <template v-else v-for="(item, index) in JSON.parse(scope.row.authCycle)">
        <div v-if="item.week.length === 7">{{ '每周' + ' ' + item.timeList[0].beginTime + '—' + item.timeList[0].expireTime }}</div>
        <div v-else-if="item.week.length === 0">未选择</div>
        <div v-else v-for="(week, index) in item.week">{{ '周' + weekName[week] + ' ' + item.timeList[0].beginTime + '—' + item.timeList[0].expireTime }}</div>
      </template>
    </template>
  </el-table-column>
</el-table>