vue3.0 table 中添按钮

在Vue3.0中，要在表格（table）中添加按钮，可以利用`<template>`标签内的插槽(slot)功能。假设我们有一个自定义的子组件，它接受两个不同的插槽：一个是用于放置按钮（通常与`v-slot`结合），另一个可能是用来显示链接或其他内容。

**子组件示例**[^1]:

<template>
  <div>
    <!-- 子组件的表头区域 -->
    <slot name="btn">默认按钮</slot>
    <p>子组件:</p>
    <!-- 可以有其他内容的插槽 -->
    <slot name="link"></slot>
  </div>
</template>

<script lang='ts'>
import { ref } from 'vue';
export default {
  setup() {
    const myNum = ref(20); // 假设这是子组件的一个可传递属性
    return {
      myNum,
    };
  },
};
</script>

**父组件示例**:

<template>
  <Child>
    <!-- 父组件的按钮和链接 -->
    <a v-slot="{ props }" href="#">点击我: {{ props.title }}</a>
    <button slot="btn">按钮</button>
    <!-- 可能还有其他动态内容 -->
    <span slot="link">这是一个链接</span>
  </Child>
</template>

在这个例子中，父组件将`<a>`元素放在`btn`插槽中，传递了一个`title`属性给子组件。`<button>`元素则直接作为`btn`插槽的内容插入。同样，`<span>`元素会被放入`link`插槽。