Vue.js 组件代码解读：权限控制按钮实现

这段代码是一个 Vue.js 组件，用于展示一个按钮。

• 按钮的样式和图标由组件属性决定：

  • :hasPermi='['data:invoice:edit']': 该属性控制按钮的权限，只有拥有 'data:invoice:edit' 权限的用户才能点击该按钮。
  • size='mini': 按钮的尺寸为迷你型。
  • type='text': 按钮的类型为文本型。
  • icon='el-icon-edit': 按钮的图标为编辑图标。

• 按钮是否可用取决于该行数据的一些属性值：

  • :disabled='!(row.invoiceStatus === '0' && (row.auditProgress === '' || row.auditProgress === '0' || row.auditProgress === '5' || row.auditProgress === '6'))': 只有当该行数据中的 invoiceStatus 为 0 且 auditProgress 为 ''、0、5 或 6 时，按钮才可用。

• 点击按钮会触发 showAddOrEdit 方法，并将该行数据传递给该方法：

  • @click='showAddOrEdit({ ...row, edit: true })': 点击按钮时，会将 row 数据对象（包含该行数据）和一个 edit 属性（值为 true）传递给 showAddOrEdit 方法。

总之，这段代码展示了一个具有权限控制功能的按钮组件，它根据数据状态来控制按钮的可用性和触发方法传递数据。