<el-table :data="tableData" stripe> <el-table-column prop="id" label="ID" width="80" sortable></el-table-column> <el-table-column prop="content" label="地址"></el-table-column> <el-table-column prop="phone" label="电话"></el-table-column> <el-table-column label="操作" width="180" align="center"> <template slot-scope="scope"> <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button> <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info" icon-color="red" title="您确定删除吗？" @confirm="del(scope.row.id)" > <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button> </el-popconfirm> </template> </el-table-column> </el-table> 添加注释

这段代码是使用 Element UI 的 el-table 组件渲染一个数据表格，其中 tableData 是传入的数据数组。每个 el-table-column 组件代表表格的一列，prop 属性指定列取值的属性名，label 属性指定列的标题，width 属性指定列的宽度，sortable 属性指定该列是否可排序。操作列包括编辑和删除两个按钮，用 el-button 组件实现，编辑按钮点击会触发 handleEdit 方法，删除按钮点击会触发一个带有确认弹窗的 del 方法。整个表格带有斑马纹效果，使用 stripe 属性实现。