2. 踩坑2 · vue.js

[TOC] ### 1. tree中当点击节点时改变节点颜色 ~~~ 1. 在控制点点击发现，被点击的子节点会多一个类icon-check，通过这个改变 .dir-container { /deep/ .el-tree { min-width: 100%; display: inline-block; font-size: 14px; .is-current{ i{ color: #1890FF; } } ~~~ ### 2. tree中添加文件夹 ~~~ <el-tree ref="modelTree" node-key="id" :default-expanded-keys="[111111]" highlight-current :data="allDataSourceType" :props="defaultProps" :default-expand-all="false" :render-after-expand="false" @node-click="onClickNodes" > <span class="custom-tree-node" slot-scope="{ node }"> <span> <i :class="node.icon"></i> {{ node.label }} </span> </span> </el-tree> ~~~ ### 3. 下载数据 ~~~ 1. 方式一 window.location.assign('http://52.83.182.209:7321/dme/api/datasources/v1/download/0c7810724874442486467e8af8224d31'); 2. 方式二 const anchor = document.createElement('a') anchor.href = 'http://52.83.182.209:7321/dme/api/datasources/v1/download/0c7810724874442486467e8af8224d31' anchor.download = `${+new Date()}.xlsx` anchor.click() 3. 方式三 //表格中的下载按钮 <template slot-scope="scope"> <span @click="download(scope.$index, scope.row)"> <i class="iconfont icon-download2"></i><span>下载</span> </span> </template> download (index,row) { const fileName = downLoadDtata.name const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' }) // ie 下载方式 if (window.navigator && window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveOrOpenBlob(blob, fileName) } else { const downloadUrl = window.URL.createObjectURL(blob) const anchor = document.createElement('a') anchor.href = downloadUrl anchor.download = fileName anchor.click() } window.URL.revokeObjectURL(blob) this.$message({ message: '下载数据源成功', type: 'success' }) } 4 . 方式四 // 通用下载方法 async commonDownloadFunction(sysCode, name) { // 获取资源提示 const loading = this.$loading({ lock: true, text: '正在获取资源中，请稍等。。。', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }) try { await downloadAlgorithms(sysCode) window.location.assign(`${this.$store.getters.appConfig.serverUrlCommon}algorithms/download/v1/${sysCode}`) loading.close() } catch (error) { loading.close() this.$message.error(`‘${name}’算法不存在或已删除！`) } 5. 方法5 // 通用下载方法 async commonDownloadFunction(sysCode, name) { try { await dowloadDataSource(sysCode) window.location.assign(`${this.$store.getters.appConfig.serverUrlCommon}datasources/v1/download/${sysCode}`) } catch (error) { this.$message.error(`下载数据源‘${name}’失败`) } ~~~ 4. 通用的图片下载方法（得到的图片不是二进制是图片，不能使用a标签下载，通过axios将数据转换成二进制，然后再用a标签） ~~~ // 异步下载方法 commonDownload(url, name) { this.imgLoading = true axios.get(url, { responseType: 'blob' }).then( res => { this.imgLoading = false let fileName = null if (res.data.type === 'image/jpeg') { fileName = `${name}.jpg` } if (res.status === 200) { if (typeof window.chrome !== 'undefined') { // Chrome const link = document.createElement('a') link.href = window.URL.createObjectURL(res.data) link.download = fileName link.click() } else if (typeof window.navigator.msSaveBlob !== 'undefined') { // IE const blob = new Blob([res.data], { type: 'application/force-download' }) window.navigator.msSaveBlob(blob, fileName) } else { // Firefox const file = new File([res.data], fileName, { type: 'application/force-download' }) window.open(URL.createObjectURL(file)) } } }, error => { console.error('error', error) } ) }, ~~~ ### 5. 操作dom时灵活运用循环中的index以及插槽中 ~~~ <el-table-column prop label="操作" min-width="19%"> <div slot-scope="scope" class="operation"> <span class="icon-container" @click="handleEdit(scope.$index, scope.row)"> <i class="iconfont icon-edit1"></i> <span>编辑</span> </span> <span class="icon-container" @click="handleDelete(scope.$index, scope.row)"> <i class="iconfont icon-delete"></i> <span>删除</span> </span> <span class="icon-container" @click="handleDownload(scope.$index, scope.row)">  <i class="iconfont icon-download2"></i> <span>下载</span> </span> </div> </el-table-column> ~~~ ### 6. 插槽 ~~~ 1. 基本： <el-scrollbar :class="wrapClass">  <slot name="content"></slot> </el-scrollbar> <dme-scrollbar wrapClass="left-scrollbar"> <div class="dir-container" slot="content"> 内容 </div> </dme-scrollbar> 表格中的插槽（在列中） <template slot-scope="scope"> <span @click="download(scope.$index, scope.row)"> <i class="iconfont icon-download2"></i><span>下载</span> </span> </template> ~~~