vue3 + view-ui-plus 外部点击按钮删除或添加table表格数据

要实现外部点击按钮删除或添加table表格数据，你可以在Vue3中使用v-model来绑定table的数据，并在外部按钮的点击事件中修改这个数据。具体实现过程如下：

1. 在template中使用view-ui-plus中的table组件，并使用v-model绑定数据：

<template>
  <div>
    <el-button @click="addData">添加数据</el-button>
    <el-table v-model="tableData" :columns="columns"></el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        columns: [
          // 列的定义
        ],
      }
    },
    methods: {
      addData() {
        // 添加数据的逻辑
      },
    }
  }
</script>

2. 在外部按钮的点击事件中修改tableData数组的值：

<template>
  <div>
    <el-button @click="addData">添加数据</el-button>
    <el-button @click="removeData">删除数据</el-button>
    <el-table v-model="tableData" :columns="columns"></el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        columns: [
          // 列的定义
        ],
      }
    },
    methods: {
      addData() {
        // 添加数据的逻辑
      },
      removeData() {
        // 删除数据的逻辑
      },
    }
  }
</script>

3. 在添加或删除数据的逻辑中，修改tableData数组的值：

<template>
  <div>
    <el-button @click="addData">添加数据</el-button>
    <el-button @click="removeData">删除数据</el-button>
    <el-table v-model="tableData" :columns="columns"></el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        columns: [
          // 列的定义
        ],
      }
    },
    methods: {
      addData() {
        this.tableData.push({
          // 新数据的定义
        })
      },
      removeData() {
        this.tableData.splice(index, 1); // index为要删除的数据在tableData中的下标
      },
    }
  }
</script>

这样就可以在外部按钮的点击事件中添加或删除table表格数据了。