项目技术:vue + element ui
问题描述:对列表项进行置顶/上移/下移/等操作时,使用了3个 <el-button>,并设置动态 disabled,其中只有置顶操作的 disabled 生效,其他2个均不生效
<!-- 错误代码 -->
<el-button type="text" :disabled="(index === 0)">置顶</el-button>
<el-button type="text" :disabled="(index === 0)">上移</el-button>
<el-button type="text" :disabled="(index === (table.length-1))">下移</el-button>
<!-- 正确写法:给 <el-button> 添加属性 key -->
<el-button type="text" :key="id+'top'" :disabled="(index === 0)">置顶</el-button>
<el-button type="text" :key="id+'up'" :disabled="(index === 0)">上移</el-button>
<el-button type="text" :key="id+'down'" :disabled="(index === (table.length-1))">下移</el-button>
参考文章:
https://blog.csdn.net/addBrick_java/article/details/125767181