<el-form-item :label-width="formLabelWidth"> <div v-for="shelfLayerNum in shelfLayerNumList" :key="shelfLayerNum" class="box"> <el-row> <el-col :span="12"> <p v-if="formInsert.codeRule==1">右侧-第{{ shelfLayerNum.index }}节</p> <p v-if="formInsert.codeRule==2">左侧-第{{ shelfLayerNum.index }}节</p> </el-col> <el-col :span="2"> <p>层数：</p> </el-col> <el-col :span="10"> <el-input-number v-model="shelfLayerNum.value" :min="1" :max="10" @change="handleChange" /> </el-col> </el-row> </div> </el-form-item> </el-form> 这段代码出现Avoid using non-primitive value as key, use string/number value instead. 怎么解决

这个警告的原因是在使用 Vue 的 v-for 指令时，使用了一个非基本类型的值作为 key，而这可能会导致性能问题和不稳定的行为。为了解决这个问题，你可以将 key 值改为一个字符串或者数字。例如，你可以将代码改写为：

<el-form-item :label-width="formLabelWidth">
  <div v-for="(shelfLayerNum, index) in shelfLayerNumList" :key="index" class="box">
    <el-row>
      <el-col :span="12">
        <p v-if="formInsert.codeRule==1">右侧-第{{ shelfLayerNum.index }}节</p>
        <p v-if="formInsert.codeRule==2">左侧-第{{ shelfLayerNum.index }}节</p>
      </el-col>
      <el-col :span="2">
        <p>层数：</p>
      </el-col>
      <el-col :span="10">
        <el-input-number v-model="shelfLayerNum.value" :min="1" :max="10" @change="handleChange" />
      </el-col>
    </el-row>
  </div>
</el-form-item>

在这个例子中，我们将 key 值改为了索引值 `index`，这是一个基本类型的值，能够避免出现上述警告。