根据这段代码增加一个删除用户按钮<div class="user-data" > <el-table class="user-data-table" :data="tableData" border stripe style="width: 100%"> <el-table-column prop="userId" label="用户ID" width="100"> </el-table-column> <el-table-column prop="userName" label="用户名称" width="120"> </el-table-column> <el-table-column prop="userSex" label="用户性别" width="100"> </el-table-column> <el-table-column prop="userAccount" label="用户账号" width="150"> </el-table-column> <el-table-column prop="userPassword" label="用户密码" width="150"> </el-table-column> <el-table-column prop="userEmail" label="用户邮箱" width="200"> </el-table-column> <el-table-column prop="userIntroduction" label="用户简介" width="200"> </el-table-column> <el-table-column prop="userIdentity" label="用户身份" width="100"> </el-table-column> <el-table-column prop="userPortrait" label="用户头像" width="450"> </el-table-column> <el-table-column fixed="right" label="操作" width="100"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small" icon="el-icon-edit">编辑</el-button> </el-popconfirm> </template> </el-table-column> </el-table>

可以在最后一个 <el-table-column> 中增加一个删除按钮，如下所示：
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small" icon="el-icon-edit">编辑</el-button>
<el-popconfirm title="确定删除该用户吗？" @onConfirm="handleDelete(scope.row)">
<el-button type="text" size="small" icon="el-icon-delete">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
登录后复制
其中，增加了一个 el-popconfirm 弹出框，当点击删除按钮时，会弹出该弹出框，询问用户是否确认删除该用户，当用户确认删除时，会调用 handleDelete 方法来删除该用户。你需要在 methods 中定义 handleDelete 方法来实现删除用户的逻辑。

相关问题

将以下vue+element ui代码转换成纯html+element ui代码：<template> <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> <el-tab-pane label="User" name="first"> <el-table :data="filterTableData" style="width: 100%"> <el-table-column label="Date" prop="date" /> <el-table-column label="Name" prop="name" /> <el-table-column align="right"> <template #header> <el-input v-model="search" size="small" placeholder="Type to search" /> </template> <template #default="scope"> <el-button size="small" @click="handleEdit(scope.$index, scope.row)" >Edit</el-button > <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)" >Delete</el-button > </template> </el-table-column> </el-table> </el-tab-pane> <el-tab-pane label="Config" name="second"> <el-table :data="filterTableData" style="width: 100%"> <el-table-column label="Date" prop="date" /> <el-table-column label="Name" prop="name" /> <el-table-column align="right"> <template #header> <el-input v-model="search" size="small" placeholder="Type to search" /> </template> <template #default="scope"> <el-button size="small" @click="handleEdit(scope.$index, scope.row)" >Edit</el-button > <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)" >Delete</el-button > </template> </el-table-column> </el-table></el-tab-pane> <el-tab-pane label="Role" name="third"> <el-table :data="filterTableData" style="width: 100%"> <el-table-column label="Date" prop="date" /> <el-table-column label="Name" prop="name" /> <el-table-column align="right"> <template #header> <el-input v-model="search" size="small" placeholder="Type to search" /> </template> <template #default="scope"> <el-button size="small" @click="handleEdit(scope.$index, scope.row)" >Edit</el-button > <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)" >Delete</el-button > </template> </el-table-column> </el-table></el-tab-pane> <el-tab-pane label="Task" name="fourth"> <el-table :data="filterTableData" style="width: 100%"> <el-table-column label="Date" prop="date" /> <el-table-column label="Name" prop="name" /> <el-table-column align="right"> <template #header> <el-input v-model="search" size="small" placeholder="Type to search" /> </template> <template #default="scope"> <el-button size="small" @click="handleEdit(scope.$index, scope.row)" >Edit</el-button > <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)" >Delete</el-button > </template> </el-table-column> </el-table></el-tab-pane> </el-tabs> </template> <script lang="ts" setup> import { computed, ref } from 'vue' interface User { date: string name: string address: string } const search = ref('') const filterTableData = computed(() => tableData.filter( (data) => !search.value || data.name.toLowerCase().includes(search.value.toLowerCase()) ) ) const handleEdit = (index: number, row: User) => { console.log(index, row) } const handleDelete = (index: number, row: User) => { console.log(index, row) } const tableData: User[] = [ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-02', name: 'John', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-04', name: 'Morgan', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-01', name: 'Jessy', address: 'No. 189, Grove St, Los Angeles', }, ] </script> <style> .demo-tabs > .el-tabs__content { padding: 32px; color: #6b778c; font-size: 32px; font-weight: 600; } </style>

以下是转换后的纯HTML+Element UI代码：
<div class="demo-tabs el-tabs">
<div class="el-tabs__header">
<div class="el-tabs__nav-wrap">
<div role="tab" aria-controls="pane-first" :aria-selected="activeName==='first' ? 'true' : 'false'" class="el-tabs__item" :class="{ 'is-active': activeName==='first' }" @click="activeName='first'">User</div>
<div role="tab" aria-controls="pane-second" :aria-selected="activeName==='second' ? 'true' : 'false'" class="el-tabs__item" :class="{ 'is-active': activeName==='second' }" @click="activeName='second'">Config</div>
<div role="tab" aria-controls="pane-third" :aria-selected="activeName==='third' ? 'true' : 'false'" class="el-tabs__item" :class="{ 'is-active': activeName==='third' }" @click="activeName='third'">Role</div>
<div role="tab" aria-controls="pane-fourth" :aria-selected="activeName==='fourth' ? 'true' : 'false'" class="el-tabs__item" :class="{ 'is-active': activeName==='fourth' }" @click="activeName='fourth'">Task</div>
</div>
</div>
<div class="el-tabs__content">
<div role="tabpanel" aria-hidden="false" id="pane-first" class="el-tab-pane" :class="{ 'is-active': activeName==='first' }">
<table class="el-table" style="width: 100%">
<thead class="el-table__header">
<tr>
<th class="el-table_1_column_1">Date</th>
<th class="el-table_1_column_2">Name</th>
<th class="el-table_1_column_3">Operation</th>
</tr>
</thead>
<tbody class="el-table__body">
<tr v-for="(item, index) in filterTableData" :key="index">
<td>{{ item.date }}</td>
<td>{{ item.name }}</td>
<td class="el-table_1_column_3">
<button class="el-button el-button--small" @click="handleEdit(index, item)">Edit</button>
<button class="el-button el-button--small el-button--danger" @click="handleDelete(index, item)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<div role="tabpanel" aria-hidden="true" id="pane-second" class="el-tab-pane" :class="{ 'is-active': activeName==='second' }">
<table class="el-table" style="width: 100%">
<thead class="el-table__header">
<tr>
<th class="el-table_2_column_1">Date</th>
<th class="el-table_2_column_2">Name</th>
<th class="el-table_2_column_3">Operation</th>
</tr>
</thead>
<tbody class="el-table__body">
<tr v-for="(item, index) in filterTableData" :key="index">
<td>{{ item.date }}</td>
<td>{{ item.name }}</td>
<td class="el-table_2_column_3">
<button class="el-button el-button--small" @click="handleEdit(index, item)">Edit</button>
<button class="el-button el-button--small el-button--danger" @click="handleDelete(index, item)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<div role="tabpanel" aria-hidden="true" id="pane-third" class="el-tab-pane" :class="{ 'is-active': activeName==='third' }">
<table class="el-table" style="width: 100%">
<thead class="el-table__header">
<tr>
<th class="el-table_3_column_1">Date</th>
<th class="el-table_3_column_2">Name</th>
<th class="el-table_3_column_3">Operation</th>
</tr>
</thead>
<tbody class="el-table__body">
<tr v-for="(item, index) in filterTableData" :key="index">
<td>{{ item.date }}</td>
<td>{{ item.name }}</td>
<td class="el-table_3_column_3">
<button class="el-button el-button--small" @click="handleEdit(index, item)">Edit</button>
<button class="el-button el-button--small el-button--danger" @click="handleDelete(index, item)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<div role="tabpanel" aria-hidden="true" id="pane-fourth" class="el-tab-pane" :class="{ 'is-active': activeName==='fourth' }">
<table class="el-table" style="width: 100%">
<thead class="el-table__header">
<tr>
<th class="el-table_4_column_1">Date</th>
<th class="el-table_4_column_2">Name</th>
<th class="el-table_4_column_3">Operation</th>
</tr>
</thead>
<tbody class="el-table__body">
<tr v-for="(item, index) in filterTableData" :key="index">
<td>{{ item.date }}</td>
<td>{{ item.name }}</td>
<td class="el-table_4_column_3">
<button class="el-button el-button--small" @click="handleEdit(index, item)">Edit</button>
<button class="el-button el-button--small el-button--danger" @click="handleDelete(index, item)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
登录后复制
需要注意的是，Element UI的CSS样式需要在HTML文件中引入。此外，上述代码中的activeName、search、filterTableData、handleEdit和handleDelete需要在JavaScript中定义和实现。

<div class="box3"> <el-table :data="tableData" style="width: 100%">里数据用 function getData1() { return axios.get("/1.json", { maxContentLength: 50 * 1024 * 1024 }).then((response) => { object1 = response.data; }, (error) => { console.log(error + "没有拿到数据"); }) }每页只展示六条数据 <el-table-column prop="user" label="user"></el-table-column> <el-table-column prop="M" label="M"></el-table-column> <el-table-column prop="M_level" label="M_level"></el-table-column> <el-table-column prop="F" label="F"></el-table-column> <el-table-column prop="F_level" label="F_level"></el-table-column> <el-table-column prop="R" label="R"></el-table-column> <el-table-column prop="R_level" label="R_level"></el-table-column> </el-table> <el-pagination v-if="total > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[6, 12, 18,24]" layout="total, sizes, prev, pager, next" :page-size.sync="pageSize" :current-page.sync="currentPage" :total="total"> </el-pagination> </div>把

这段代码包含了一个使用 Vue.js 和 Element UI 组件库构建的表格和分页组件。其中，表格的数据来源是通过发送一个 GET 请求到服务器端获取的，返回的数据被赋值给了组件内的一个变量 object1。表格中包含了七列数据，分别是 user、M、M_level、F、F_level、R 和 R_level。分页组件使用了 Element UI 中的 el-pagination 组件，支持用户选择每页展示的数据条数、跳转到指定页等功能。