element-ui 点击图片预览文字、导出excel表格

1、点击图片预览文字

引入el-image中的组件

import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

2、监听

 watch: {
    '监听的参数': {
      handler (n, o) {
       
      },
      deep: true, //监听对象或数组
      immediate: true //当值第一次绑定时，立即执行
    }
  },

 普通监听

  watch: {
    rangeDate: function (newVal, oldVal) {
      if (newVal !== null) {
        this.tableParams.beginDate = newVal[0]
        this.tableParams.endDate = newVal[1]
      } else {
        this.tableParams.beginDate = null
        this.tableParams.endDate = null
      }
    }
  },

3、Vue项目cdn优化注意

1、index.html引入资源时注意 vue.js 必须在 vue-router、vuex、element-ui 之前引入。
2、bulid/webpack.base.conf.js 修改配置时 “element-ui”: “ELEMENT” 是固定写法。
3、如果 element-ui 采用 cdn 引入的方式，vue 不采用 cdn 引入的方式，这样打包以后打开 dist 下的 index.html 时页面空白报错，必须 vue 和 element-ui 都采用 cdn 引入的方式。

4、页面刷新或关闭时提醒

beforeunload事件在当页面卸载（关闭）或刷新时调用，事件触发的时候弹出一个有确定和取消的对话框，确定则离开页面，取消则继续待在本页；

mounted () {
    window.onbeforeunload = () => {
      
      return 'tips'
    }
  },

 

 5、上传图片并带参数

uploadDataFn () {
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        dataType: 'json'
      }

      axios.defaults.headers.common['token'] = this.$cookie.get('token')
      this.uploadForm.append('username', this.username)
      this.uploadForm.append('params', JSON.stringify(this.params))
      axios .post(
              this.$http.adornUrl('上传路径'),
              this.uploadForm, //new FormData()
              config
            )
            .then(res => {
              
            })
            .catch(res => {
              console.log('出错啦！' + res)
            })
    },

6、导出excel表格

   exportExcel () {
      this.$confirm('是否导出表格中的数据', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'info'
      }).then(() => {
        this.exportLoading = true
        axios.defaults.headers.common['token'] = this.$cookie.get('token')
        axios({
          method: 'post',
          url: url,
          data: this.tableParams,
          timeout: 0,
          responseType: 'blob'
        }).then((res) => {
          if (res && res.status === 200) {
            this.exportLoading = false
            const blob = res.data
            const reader = new FileReader()
            reader.readAsDataURL(blob)
            reader.onload = (e) => {
              const a = document.createElement('a')
              a.download = '报表'
              a.href = e.target.result
              document.body.appendChild(a)
              a.click()
              document.body.removeChild(a)
            }
          } else {
            console.log(res.data)
          }
        })
      })
    },