Ant Design Vue ＜a-table＞

小贵子的博客2026-01-10 13:52

问题：

Ant Design Vue <a-table>组件里面的插槽，如果按钮用a标签的话，编辑按钮根据条件判断是否禁用没有生效，还是会打开编辑弹窗。

原因：

点击a标签会触发原生的鼠标点击事件，导致禁用没有生效。

解决办法：

通过动态的设置样式，以及disabled属性可以控制编辑按钮能否点击。

html 复制代码

          <a
            @click="$emit('option', 'edit', record)"
            :style="{ pointerEvents: isEdit(record) ? 'none' : 'auto' }"
            :disabled="isEdit(record) ? true : null"
          >
            编辑
          </a>

js:

javascript 复制代码

// 是否可以编辑
function isEdit(record) {
  if (
    record.invoiceStatus === 'SUBMITTED' ||
    record.invoiceStatus === 'CANCEL' ||
    record.invoiceStatus === 'APPROVAL' ||
    record.invoiceStatus === 'POSTED'
  ) {
    return true
  }
  return false
}

效果：