vue模拟html table 循环数据action按钮

在Vue.js中，你可以通过v-for指令来模拟HTML表格并循环遍历数据。假设你有一个数组`dataList`包含了你需要展示的数据，每个数据项都有一个动作相关的属性，比如`action`。你可以这样做：

<template>
  <table>
    <thead>
      <tr>
        <!-- 表头列 -->
        <th v-for="(column, index) in headers" :key="index">{{ column }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in dataList" :key="index">
        <!-- 每行数据 -->
        <td v-for="(property, i) in item" :key="i">{{ property }}</td>
        <!-- 动作按钮部分 -->
        <td>
          <button @click="performAction(item.action)">执行操作</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      dataList: [], // 你的数据源
      headers: ['标题1', '标题2', '操作'] // 表头列表示例
    };
  },
  methods: {
    performAction(action) {
      // 这里根据action属性的实际值处理对应的业务逻辑
      console.log('执行操作:', action);
    }
  }
};
</script>

在这个例子中，当用户点击某一行的“执行操作”按钮时，会触发`performAction`方法，并传入当前行数据的`action`属性值。记得替换`headers`和`dataList`为你实际的数据。