npm install xlsx --save
npm installiview--save
main入口引入
import iView from 'iview'
import 'iview/dist/styles/iview.css'
Vue.use(iView)
使用
<button @click="exportExcel">导出excel
:columns="columns1" :data="data1"></Table>
JS引入封装excel
import excelfrom '../../config/excel'
data(){
return{
columns1: [
{
title:'Name',
key:'name'
},
{
title:'Age',
key:'age'
},
{
title:'Address',
key:'address'
},
],
data1: [
{
name:'John Brown',
age:18,
address:'New York No. 1 Lake Park',
date:'2016-10-03'
},
{
name:'Jim Green',
age:24,
address:'London No. 1 Lake Park',
date:'2016-10-01'
},
{
name:'Joe Black',
age:30,
address:'Sydney No. 1 Lake Park',
date:'2016-10-02'
},
{
name:'Jon Snow',
age:26,
address:'Ottawa No. 2 Lake Park',
date:'2016-10-04'
},
],
methods: {
exportExcel() {
if (this.data1.length) {
const cloneData =this.data1
const params = {
title: ['Name', 'Age', 'Address', ],
key: ['name', 'age', 'address', ],
data: cloneData,
autoWidth:true,
filename:'工单列表'
}
excel.export_array_to_excel(params)
}else {
this.$Message.info('表格数据不能为空！')
}
}
1 引入第三方插件import echarts from 'echarts'
2 引入工具类
第一种是引入单个方法
import {axiosfetch} from './util'
下面是写法，需要export导出
export function axiosfetch(options) {
}
第二种 导入成组的方法
import * as tools from './libs/tools'
其中tools.js中有多个export方法,把tools里所有export的方法导入
vue中怎么用呢？
Vue.prototype. tools.method调用就可以了
export 和 export default 又有什么区别呢？
下面看下区别
先是 export
import {axiosfetch} from './util'
//需要加花括号 可以一次导入多个也可以一次导入一个，但都要加括号
如果是两个方法
import {axiosfetch,post} from './util'
再是 export default
import axiosfetch from './util'//不需要加花括号 只能一个一个导入
3.导入 css文件
import 'iview/dist/styles/iview.css'
如果是在.vue文件中那么在外面套个style
<style>
@import './test.css'
</style>
4.导入组件
import name1 from './name1'
import name2 from './name2'
components:{
name1,
name2,
}
Vue3对CSS支持加入了更多的特性支持，这样的话，我们在项目当中使用CSS就变得更加灵活了，来吧我们直接上干货
在style的标签上加一个module的属性，这样style里面的内容就会被编译成CSS Modules（模块），默认情况下，我们可以在模板代码里，或者JS里通过$style拿到所有样式属性并使用
我们也可以给CSS Modules自定义一个名称，在style的module属性设置一个名称就可以了,这样的话在模板和JS里就通过自定义的名称来引入CSS里的属性
与组合式 API 一同使用，注入的类可以通过 useCssModule API 在 setup() 和.success { color: #090}
可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上
这个语法同样也适用于
