解决vue中使用v-html解析后table表格的线不见了

vue中使用 v-html 解析富文本

1.在编辑器中输入什么就显示什么

wangeditor

2.使用v-html解析后有问题

wangeditor

可以看看☞☞ 官网地址

需要注意的是:从编辑器中获取的 html 代码是不包含任何样式的纯 html,如果显示的时候需要对其中的<table><code><blockquote>等标签进行自定义样式(这样既可实现多皮肤功能)

在这里插入图片描述

使用v-html去解析富文本内容

<div class="el-form-item">
   <labelclass="el-form-item__label">描述:</label>
   <div class=" xxxxx9" v-html="detailData.description" />
 </div>
.xxxxx9 table{
  border: 1px solid #ccc;
}
.xxxxx9 table th,.xxxxx9 table td{
  border: 1px solid #ccc;
}
.xxxxx9 table td{
  padding: 0px 5px;
}

e
e

  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
很抱歉,我之前的回答有误,x-data-spreadsheet是基于JavaScript的电子表格库,而不是Vue组件。 以下是一个使用x-data-spreadsheet库实现Excel文件导入导出和可编辑单元格样式的示例代码: HTML模板代码: ``` <template> <div> <button @click="exportExcel">导出Excel文件</button> <input type="file" ref="file" style="display:none" @change="importExcel" /> <button @click="() => { this.$refs.file.click() }">导入Excel文件</button> <div ref="spreadsheet"></div> </div> </template> ``` JS代码: ``` <script> import Spreadsheet from 'x-data-spreadsheet' import 'x-data-spreadsheet/dist/xspreadsheet.css' export default { mounted() { const el = this.$refs.spreadsheet const options = { data: [], columns: [ { title: '姓名', field: 'name', width: 120 }, { title: '年龄', field: 'age', width: 80 }, { title: '性别', field: 'gender', width: 80 }, ], style: { bgcolor: '#f1f1f1', align: 'center', valign: 'middle', textwrap: true }, row: { len: 20, height: 30 } } this.spreadsheet = new Spreadsheet(el, options) }, methods: { async exportExcel() { const data = this.spreadsheet.getData() const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }) const url = URL.createObjectURL(blob) const link = document.createElement('a') link.href = url link.download = 'excel.xlsx' link.click() }, async importExcel() { const file = this.$refs.file.files[0] const reader = new FileReader() reader.onload = async (event) => { const data = event.target.result const { arrayBuffer } = await import('xlsx') const workbook = arrayBuffer(data) const worksheet = workbook.Sheets[workbook.SheetNames[0]] const sheetData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }) const headerRow = sheetData[0] const tableData = [] for (let i = 1; i < sheetData.length; i++) { const rowData = {} for (let j = 0; j < headerRow.length; j++) { const key = headerRow[j] rowData[key] = sheetData[i][j] } tableData.push(rowData) } this.spreadsheet.loadData(tableData) } reader.readAsArrayBuffer(file) } } } </script> ``` 这个示例,我们使用了x-data-spreadsheet库来渲染一个电子表格。在mounted钩子函数,我们创建了一个Spreadsheet对象,并将其挂载到了页面上的一个div元素上。我们指定了表格的数据、列定义、单元格样式和行高等选项。 导出Excel文件的方法是通过调用Spreadsheet对象的getData方法获取表格的数据,然后使用Blob对象将数据转换为Excel文件格式,并创建一个a标签下载文件。 导入Excel文件的方法是通过一个input元素来获取用户选择的文件,然后使用FileReader对象将文件读取为ArrayBuffer二进制格式。接下来,我们使用xlsx库解析文件数据,获取到表格数据后,我们将其转换为x-data-spreadsheet库所需的数据格式,并使用Spreadsheet对象的loadData方法加载数据。 希望这个示例能够对您有所帮助。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值