本文介绍了如何在Vue.js应用中使用ElementUI的表格组件展示学生信息，并实现导出功能，包括数据展示、状态标记和编辑/删除操作的实现。
return wbout
},
4、设置Button按钮触发方法*exportExcel()*即可
<el-button type=“primary” @click=“exportExcel()”>导出
<el-button type=“primary” @click=“exportExcel()”>导出
<el-table
:data=“students”
:header-cell-style="{
background: ‘#E7F4FF’,
color: ‘#000’,
‘font-weight’: ‘700’,
}"
border
stripestyle=“width: 100%”
<el-table-column
prop=“ownCode”
label=“学生ID”
align=“center”
width=“200px”
<el-table-column
prop=“phone”
label=“手机号”
align=“center”
<el-table-column
prop=“name”
label=“学生姓名”
align=“center”
<el-table-column
prop=“sex”
label=“学生性别”
align=“center”
width=“100px”
<el-table-column
prop=“age”
label=“学生年龄”
align=“center”
<el-table-column
prop=“enabled”
label=“学生状态”
align=“center”
width=“100px”
<el-tag size=“small” v-if=“scope.row.enabled == ‘Y’” effect=“plain”
生效</el-tag
<el-tag
size=“small”
v-if=“scope.row.enabled == ‘N’”
effect=“plain”
type=“danger”
失效</el-tag
<el-button size=“mini” @click=“handleEdit(scope.$index, scope.row)”
修改</el-button
<el-button
size=“mini”
type=“danger”
@click=“handleDelete(scope.$index, scope.row)”
删除</el-button
148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
