vue table 模拟数据action按钮

在Vue.js中，Table组件通常用于展示数据列表，并提供一些操作按钮，如"Action"按钮，用于执行针对每个表格行的特定操作。模拟数据通常涉及创建一个数组结构，代表表格的数据源，包含静态属性和动作属性。

例如，你可以创建一个这样的数据模型：

const tableData = [
  {
    id: 1,
    name: '张三',
    email: 'zhangsan@example.com',
    actions: [
      { label: '编辑', icon: 'edit', action: () => console.log('编辑') },
      { label: '删除', icon: 'delete', action: () => confirm('确定删除吗?') }
    ]
  },
  // ... 其他行数据
]

在这个例子中，`actions`是一个数组，包含了每个数据对象的额外操作信息，包括标签、图标以及对应的处理函数。在模板中，你可以遍历这个数组，显示每个按钮：

<table>
  <tr v-for="item in tableData">
    <td>{{ item.name }}</td>
    <td>{{ item.email }}</td>
    <td>
      <button v-for="action in item.actions" :key="action.label">
        {{ action.label }} <i :class="action.icon"></i>
      </button>
    </td>
  </tr>
</table>

当用户点击这些按钮时，会触发对应的动作函数。记住，这只是一个基本示例，实际应用中可能需要配合Vuex管理状态，或者使用事件系统来触发更复杂的行为。