vue中原生html表格展开卡片

在Vue.js中，原生HTML表格通常结合模板和JavaScript动态渲染来创建可展开的卡片式结构。这种需求可以使用v-for循环遍历数组，并通过条件渲染来控制行是否展开。下面是一个简单的例子：

<table>
  <tr v-for="(item, index) in data" :key="index">
    <td>常规内容<td>
    <td class="expand-btn" @click="toggleExpand(index)">{{ item.expanded ? '收起' : '展开' }}</td>
    <template v-if="item.expanded">
      <!-- 展开后的卡片内容 -->
      <div v-cloak>{{ item.expandedContent }}</div>
    </template>
  </tr>
</table>

<script>
export default {
  data() {
    return {
      data: [
        { content: '原始数据', expanded: false, expandedContent: '详细内容...' },
        // 其他数据项...
      ]
    };
  },
  methods: {
    toggleExpand(index) {
      this.data[index].expanded = !this.data[index].expanded;
    }
  }
};
</script>

在这个例子中，每个表格行都有一个`expand-btn`列，点击时会触发`toggleExpand`方法，切换当前行的`expanded`状态。如果`expanded`为true，则展示`expandedContent`字段的内容。