vue数据以html显示,Vue实现用户自定义字段显示数据的方法

本文介绍了一种在Vue中实现用户自定义字段显示数据的方法,通过示例代码展示了如何根据用户的选择动态显示数据,包括体重、兴趣、学校等字段,并提供了编辑、删除、查看等功能。
摘要由CSDN通过智能技术生成

如下:

e3889005a8638976a551acc5aa9d51bd.png

代码:

.middle::-webkit-scrollbar {height:8px;}

/* 滚动槽 */

.middle::-webkit-scrollbar-track {border-radius: 10px;}

/* 滚动条滑块 */

.middle::-webkit-scrollbar-thumb {background: #ccc;}

* {margin: 0;padding: 0;box-sizing:border-box;font-family: "微软雅黑";}

#tabpanel{width:1100px;height:300px;margin:100px auto;}

.left{float:left;height:300px;width:300px;font-size:0;}

.left .item,.right .item,.middle .item{display:inline-block;width:100px;}

.left .item span,.middle .item span,.left .item span{display:block;height:50px;text-align:center;line-height:50px;font-size:14px;border:1px solid #eee;}

.right .item{width:200px;height:50px;line-height:50px;text-align:center;border:1px solid #

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
A: 实现自定义字段导出EXCEL可以分为以下几个步骤: 1.构建表格数据:首先需要从后台获取表格数据,将其构建成一个二维数组,同时需要定义表头等相关参数。 2.创建表格对象:使用第三方库(如xlsx)创建表格对象,设置表格标题等相关参数。 3.填充表格数据:循环将表格数据中的每个元素写入表格中。可以根据需要导出的字段,只填充特定的列。 4.导出表格文件:使用FileSaver.js等库将表格文件保存到本地。 下面是一个纯VUE实现自定义字段导出EXCEL的示例代码: <template> <div> <button @click="exportExcel">导出Excel</button> </div> </template> <script> import { utils, writeFile } from 'xlsx'; export default { data() { return { tableData: [ ['姓名', '年龄', '性别', '城市'], ['张三', 18, '男', '北京'], ['李四', 20, '女', '上海'], ], }; }, methods: { exportExcel() { const headers = ['姓名', '性别']; // 自定义导出的字段 const data = this.tableData.map(item => { return headers.map(key => item[key]); }); data.unshift(headers); // 表头数据 const ws = utils.aoa_to_sheet(data); const wb = utils.book_new(); utils.book_append_sheet(wb, ws, 'Sheet1'); const fileName = '表格数据.xlsx'; writeFile(wb, fileName); }, }, }; </script> 上面的示例代码使用了xlsx库来创建和填充表格数据。需要注意的是,该库默认只支持浏览器环境。如果需要在Node.js环境中使用,可以考虑使用node-xlsx库。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值