FEMessage / el-data-table

🥘Base on element-ui, makes crud easily
https://femessage.github.io/el-data-table/
MIT License
486 stars 112 forks source link

翻页时extraButtons的disabled样式没相应更新 #289

Closed zcqno1 closed 4 years ago

zcqno1 commented 4 years ago

Describe the bug

一个使用 extraButtonsdata-tableextraButtons 配置了 disabled 属性,进行翻页,同一行的按钮的 disabled 状态可能会发生改变,可交互状态相应变化,但 disabled 的样式会一直保留一开始加载那一页的样式

Screenshots

首次加载时,样式正常 image 翻页,同序号行的状态变化了,但样式沿用了前一页的 image

To Reproduce

Steps to reproduce the behavior:

  1. 配置使用 extraButtons 的表格,设置按钮 disabled 属性
  2. 模拟数据,使不同页存在相同序号的行状态不同
  3. 首次进入某一页,查看 disbled 按钮样式,应该正常
  4. 翻到 2 中确定有同行状态不同的页,查看该行按钮的样式,样式跟前一页的一样,没有相应变化(取消或增加 el-button--disabled 类)

Expected behavior

disabled 的按钮样式相应更新

Possible Reason

dom复用

          <template v-for="(btn, i) in extraButtons">
              <self-loading-button
                v-if="'show' in btn ? btn.show(scope.row) : true"
                :key="i"
                :is-text="operationButtonType === 'text'"
                v-bind="btn"
                :click="btn.atClick"
                :params="scope.row"
                :callback="getList"
                :disabled="'disabled' in btn ? btn.disabled(scope.row) : false"
              >

https://github.com/FEMessage/el-data-table/blob/92eb6b2afb9b3afd32c69196736cca01c072c83f/src/el-data-table.vue#L220

environment information