elementui中有导出组件吗_Vue-elementUI 添加Excel导出功能和富文本编辑功能

由于最近业务需求，需要在表单内添加Excel导出和富文本(tinymce)编辑功能，故记录一下导入步骤

VUE导出Excel表格功能

1. 先安装三个依赖

npm install -S file-saver xlsx

npm install -D script-loader

2. 放置模板文件

在src同级目录下新建一个文件名为(vendor)【名字自己喜欢蛤~】

vendor文件内放置Blob.js 和 Export2Excel.js (文件可在vue-element-admin拉取)

3. 然后在使用的组件内添加

模板template

导出

methods添加两个方法

handleDownload() {

this.downloadLoading = true

import('@/vendor/Export2Excel').then(excel => {

const tHeader = ['序号', '发送开始时间', '发送截止时间'] //excel 表头

const filterVal = ['billCode', 'screenId', 'updateTime'] //获取的数据字段名

const list = this.sendDtlList //所要生成Excel数据源

const data = this.formatJson(filterVal, list)

excel.export_json_to_excel({

header: tHeader,

data,

filename: this.filename,

autoWidth: this.autoWidth

})

this.downloadLoading = false

})

},

formatJson(filterVal, jsonData) {

return jsonData.map(v => filterVal.map(j => {

if (j === 'timestamp') {

return parseTime(v[j])

} else {

return v[j]

}

}))

},

4.备注

注：如果webpack报解析错误：

在build----webpack.base.conf.js中resolve的alias加入 'vendor': path.resolve(__dirname, '../src/vendor'),

即可解决

另：alias是配置别名

Vue中添加富文本富文本(tinymce)编辑功能

1. 在static文件夹内放入tinymce组件包(我用的是tinymce4.7.5)

image.png

2. 在index.html内添加

引入tinymce

image.png

3. 在components文件夹内放入组件包(Tinymce)

image.png

4. 注入组件

在所需注入的组件内引入Tinymce组件

import Tinymce from '@/components/Tinymce'

注入组件

components: { Tinymce }

data内绑定数据

data:{

return{

content:" ",

}

}

5. 在所在组件内模板中添加

//引入组件

6.根据所需配置需要的功能

image.png

由于我的项目只需要文本编辑，故只按需配置了文本的功能。

plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',

toolbar: `bold italic underline strikethrough | fontsizeselect

| forecolor backcolor | bullist numlist

| outdent indent blockquote | undo redo | removeformat

| alignleft aligncenter alignright alignjustify `,

更多配置可以到官网看

tinymce官网