使用闪亮的小部件选择datatable的特定行

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<div id="app">
  <el-table :data="tableData" @selection-change="handleSelectionChange">
    <el-table-column type="selection"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
  <el-button @click="deleteSelectedRows">Delete Selected Rows</el-button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    tableData: [
      { name: 'John', age: 20, address: 'New York' },
      { name: 'Jane', age: 25, address: 'Paris' },
      { name: 'Mike', age: 30, address: 'Tokyo' },
      { name: 'Alice', age: 35, address: 'London' }
    ],
    selectedRows: [] // 存储选中的行
  },
  methods: {
    handleSelectionChange: function(selection) {
      this.selectedRows = selection;
    },
    deleteSelectedRows: function() {
      // 根据选中的行进行相应操作，例如删除
      this.selectedRows.forEach(row => {
        var index = this.tableData.indexOf(row);
        if (index !== -1) {
          this.tableData.splice(index, 1);
        }
      });
      this.selectedRows = [];
    }
  }
});