Vue
YaaLee_
逝者如斯夫,不舍昼夜
展开
-
利用html2canvas导出图片(html结构导出)
首先需要安装插件npm install html2canvas导入插件:import html2canvas from 'html2canvas'事件:downloadImg('jpg')downloadImg('png')逻辑:// 下载图片downloadImg (type) { html2canvas(document.querySelector('需导出的结构类名')).then(canvas => { const url = canvas.toDataUR原创 2022-05-18 15:10:52 · 573 阅读 · 0 评论 -
Antd vue 表格自定义页码(Pagination)
在antd vue中,有默认的页码,但是想自定义页码需要自己配置案例:代码:html:<a-table :rowKey="(record, index) => record.key" :loading="tableData.loading" :columns="columns" :pagination="{...pagination, total:tableData.total,}" :data-source="tableData.list" bordered原创 2022-04-20 09:23:20 · 2719 阅读 · 1 评论 -
highcharts本地导出图片
copyChart () { // 复制charts为图片 // 获取highcharts的svg图片 const img = new Image() img.src = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(this.getChartSVG())))} ` // 将svg转化为canvas const canvas = document.createElement('canvas') const原创 2022-01-18 10:17:05 · 1369 阅读 · 0 评论 -
vue 启动Module build failed (from ./node_modules/vue-loader/lib/index.js)
把node_modules 删除之后,输入以下命令(一定这个顺序):1 npm install vue-template-compiler -D2 npm install3 npm run dev原创 2022-01-04 11:20:46 · 1287 阅读 · 0 评论 -
echarts x轴字数溢出隐藏
xAxis中:axisLabel: { margin: 8, formatter: function (params) { var val = ""; // 超过四个字隐藏 if (params.length > 4) { // 截取四个字 val = params.substr(0, 4) + '...'; return val; } else {原创 2021-12-27 17:33:54 · 806 阅读 · 0 评论 -
echarts 触发点击节点事件
myChart.on('click',function(params){ console.log('myChart----click---:',params.data)});原创 2021-12-22 16:21:16 · 321 阅读 · 0 评论 -
vue中变更路由标题和图标(meta)
需要把变更的图标放到public的static文件夹下直接上代码:router.beforeEach((to, from, next) => { NProgress.start() // 更改标题 if (to.meta.title) { document.title = to.meta.title } // 更改图标 if (to.meta.icon) { document.getElementsByTagName('link')[0].setAttrib原创 2021-12-22 15:57:12 · 1649 阅读 · 0 评论 -
antd vue 调整checkbox默认样式
// 鼠标hover时候的颜色.ant-checkbox-wrapper:hover .ant-checkbox-inner,.ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner{ border: 2px solid #1BBA79 !important;}// 设置默认的颜色.ant-checkbox{ .ant-checkbox-inner{ bord原创 2021-12-14 15:59:05 · 2478 阅读 · 0 评论 -
echarts x轴超过字数换行
xAxis中:axisLabel: { show: true, color: "#90CFFF", fontSize: 24, formatter : function(params){ var newParamsName = "";// 最终拼接成的字符串 var paramsNameNumber = params.length;// 实际标签的个数 var provideNumber = 4;//原创 2021-12-14 15:42:51 · 513 阅读 · 0 评论 -
echarts柱状图上方显示数值
series: [ { name: "计划", type: "bar", // stack: "Total", data: [], barWidth: 30, itemStyle: { normal: { color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, colo原创 2021-12-13 17:18:52 · 3344 阅读 · 0 评论 -
antd vue 设置table表格滚动条样式
/deep/.ant-table-body{ &::-webkit-scrollbar {//整体样式 height: 12px; } &::-webkit-scrollbar-thumb {//滑动滑块条样式 // border-radius: 30px; // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); // background: #00aaff; background:原创 2021-12-09 13:59:58 · 1737 阅读 · 0 评论 -
echarts多次渲染更细报错的问题(There is a chart instance already initialized on the dom)
同一个echarts数据变化或需要重新渲染的时候会报错解决的办法就是先在页面卸载这个chart图表,再重新渲染一次let myChart //卸载原有的chartthis.$echarts.init(document.getElementById("chartName")).dispose();myChart = this.$echarts.init(document.getElementById("chartName"));myChart.setOption(option);...原创 2021-12-09 13:45:52 · 780 阅读 · 0 评论 -
vue不同组件使用window.onresize只监听到一个的问题
原本写法:window.onresize = () => { // 窗口尺寸改变时触发事件}改进写法window.addEventListener('resize', () => { // 窗口尺寸改变时触发事件})原创 2021-12-09 13:37:27 · 855 阅读 · 0 评论 -
echarts在legend中显示百分比或value值
所占百分比:formatter:function (name) { var total=0; for (var i=0;i<option.series[0].data.length;i++){ total+=option.series[0].data[i].value; } for (i=0;i<option.series[0].data.length;i++){ var dpercent=(option.series[0].data[i].value/tot原创 2021-12-08 09:44:56 · 4604 阅读 · 1 评论 -
antd vue 表格无数据时表头不全显示x轴滚动条
效果:css:/deep/ .ant-table-placeholder { padding: 0; border-top: none;}原创 2021-11-24 14:06:18 · 2027 阅读 · 2 评论 -
antd vue 表格rowSelection选择框功能的使用
html部分:<a-table :columns="columns" :data-source="showList" :row-selection="rowSelection" :rowKey="record=>record.id" />功能部分:computed: { rowSelection () { return { selectedRowKeys: this.da原创 2021-11-22 18:02:50 · 9648 阅读 · 9 评论 -
antd vue table表格中rowSelection默认选中下一页同行数据的问题
在antd 表格组件中,有一个默认选中功能,叫做rowSelection在使用中,你选中第一页的第一行数据,滚动加载或者通过别的事件触发加载,第二页的第一行同样会选中html<a-table :columns="columns" :data-source="showList" :row-selection="rowSelection" :rowKey="record=>record.id" />只有加ro原创 2021-11-22 17:54:06 · 1462 阅读 · 0 评论 -
antd vue 树结构模糊查询关键字字高亮
官方文档给的根本没法用,今天给大家带来一段简单封装的代码样例:html结构:其中最重要的就是中间的插槽了,我们采用span拼接的方式来实现关键字高亮效果<a-input-search placeholder="请输入数据集关键字" enter-button v-model="searchStr" @search="onSearch" /><a-tree :expanded-keys="expandedKeys" v-model="treeVal" s原创 2021-11-11 21:16:12 · 2416 阅读 · 4 评论 -
antd vue 树控件自动自定义展开收起图标(非数据渲染)
<a-tree show-icon :icon="getIcon" :tree-data="treeData"></a-tree>getIcon (props) { const { expanded } = props if (!props.children) { return <a-icon class="file" type="file-text" /> } return <a-icon type={expanded原创 2021-11-09 22:00:01 · 1692 阅读 · 0 评论 -
antd vue 树控件中自定义连接线
/deep/.ant-tree-child-tree.ant-tree-child-tree-open > li:first-child { padding-top: 4px;}.last-menu-line() { position: absolute; left: 12px; width: 1px; height: 100%; margin: 22px 0 0; border-left: 1px dotted @primary-color; content: "原创 2021-11-09 21:54:34 · 2091 阅读 · 0 评论 -
Vue中通用滚动底部加载
html<div @scroll="groupScroll"></div>jsgroupScroll () { this.$nextTick(() => { var dom = document.querySelectorAll('.rightButtom')[0] const scrollTop = dom.scrollTop const windowHeight = dom.clientHeight const scrollHei原创 2021-11-09 10:46:00 · 194 阅读 · 0 评论 -
antd vue 解决表格debug出现rowKey的问题
showList里面每行加一个唯一值key,然后再table中动态绑定rowKey就可以了<a-table :data-source="showList" :columns="columns" :rowKey="record=>record.key"/>原创 2021-10-27 11:28:40 · 569 阅读 · 0 评论 -
vue 单表格混入封装
import qs from 'qs'import { axios } from '@/utils/request'export default { data() { return { viewModuleOptions: { createdIsNeed: true, // 此页面是否在创建时,调用查询数据列表接口? activatedIsNeed: false, // 此页面是否在激活(进入原创 2021-10-21 09:06:44 · 154 阅读 · 0 评论 -
antd vue 表格可伸缩列
antd中 有一个表格可拖动的插件叫做vue-draggable-resizable的插件,但是按照官方文档来进行安装及引用会有一系列的报错,如下:antd vue官方文档源代码:<template> <a-table bordered :columns="columns" :components="components" :data-source="data"> <template v-slot:action> <a href="ja原创 2021-10-18 09:32:03 · 1107 阅读 · 0 评论 -
antd vue表格自定义跳转筛选
<a-button type="primary" @click="onAdd">新增</a-button><a-table :scroll="{ x:'100%',y: 'calc(100vh - 300px)' }" :columns="columns" :data-source="data" :pagination="false" bordered> <template v-for="col in ['name', 'age',原创 2021-10-12 16:45:44 · 396 阅读 · 0 评论 -
导入excel表格(随机表头)
<a-upload accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel":beforeUpload="beforeUpload" @change="handleFileChange"> <a-button type="primary">导入Excel</a-button></a-upload>原创 2021-10-11 19:30:55 · 137 阅读 · 0 评论 -
antd vue 中表格添加行自动滚动到最新行
addRow () { this.showList.push({ key: this.showList.length, yearMon: '', dmMethod: '', wellType: '', wellName: '', wellTime: '', oilInc: '' }) this.key += 1 this.$nextTick(() => { var dom = document.querySelectorA原创 2021-09-30 11:05:36 · 1011 阅读 · 2 评论 -
Vue中的nextTick
nextTick最主要的作用就是当dom发生改变后,可以获取到最新dom的某个节点,而不是dom更新前的节点 this.$nextTick(() => { //要获取的节点})原创 2021-09-30 11:02:28 · 62 阅读 · 0 评论 -
antd vue表格自适应高度问题
一个table组件复用,它只有一个scroll来控制表格下(不包含表头)的高度,所以我们得使表格高度自适应。<a-table :columns="columns" :data-source="dataList" :loading="!showTable" bordered size="small" :scroll="{ x: '100%', y: `calc(100vh - ${tableTop+280+'px'})` }" :pagination="false">原创 2021-09-24 17:24:20 · 4235 阅读 · 0 评论 -
antd vue 表格中嵌入各种表单元素(input,select,点击删除)
效果:结构:<a-table v-show="isDone==='plan'" :pagination="false" :columns="columns" :data-source="showList" bordered size="middle" :scroll="{ y: 'calc(100vh - 250px)' }"> <template v-for="col in [ 'yearMon', 'wellType','dmMethod', '原创 2021-09-24 14:39:59 · 2460 阅读 · 1 评论 -
antd vue 表格中td换行的问题
在表格组件中,是不支持 \n \r 来进行字符串的换行的,想要在单元格td下使字符串换行需要一个html格式及\br来进行换行,这时我们就需要在每个td当中建立一个插槽模板,然后再以v-html的形式来插入html格式字符串结构:<a-table :loading="loading" :pagination="false" :columns="columns" :data-source="showList" bordered size="middle" :scroll=原创 2021-09-24 14:32:52 · 2077 阅读 · 0 评论 -
vue中将antd vue 表格导出为excel
1.安装依赖1. $ npm install -S file-saver xlsx2. $ npm install -S script-loader2.引入必备文件在 excel文件夹目录Blob.js文件/* eslint-disable *//* Blob.js * A Blob implementation. * 2014-05-27 * * By Eli Grey, http://eligrey.com * By Devin Samarin, https://github.c原创 2021-09-15 22:02:52 · 747 阅读 · 0 评论 -
Vue中使用proxy配置代理解决跨域问题
1、需求说明在前后端分离开发中,前端发送ajax请求因为受到了浏览器同源策略的限制,会出现跨域的问题,在Vue项目中使用代理请求解决跨域问题。如果使用vue/cli 4.x以上版本创建的Vue项目,在项目的根目录中创建 vue.config.js 配置文件。2、代码实现在Vue项目根目录创建 vue.config.js 配置文件,配置代码如下:module.exports = { devServer: { proxy: { '/api': {原创 2021-08-12 11:23:35 · 504 阅读 · 0 评论 -
TypeScript全攻略(收藏吃灰必备!)
1、TypeScript 简介1.1、什么是 TypeScriptTypeScript 不是一门全新的语言,TypeScript 是 JavaScript 的超集,它对 JavaScript 进行了一些规范和补充。所以,学习 TypeScript 需要有 JavaScript 的基础。TypeScript 的特性:TypeScript 是 JavaScript 的超集,它可以编译成纯 JavaScript。TypeScript 基于 ECMAScript 标准进行拓展,支持 ECMAScrip原创 2021-08-03 19:26:58 · 754 阅读 · 0 评论 -
虚拟DOM中的key
一、react/vue中的key有什么作用?(key的内部原理是什么?)虚拟DOM中key的作用:简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。详细的说: 当状态中的数据发生变化时,react会根据【新数据】生成【新的虚拟DOM】, 随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较,比较规则如下:a.旧虚拟DOM中找到了与新虚拟DOM相同的key:(1).若虚拟DOM中内容没变, 直接使用之前的真实DOM(2).若虚拟DOM中内容变了原创 2021-08-03 17:39:15 · 480 阅读 · 0 评论 -
Vue中路由表单缓存(keep-alive)
vue 中从一个路由切换到另一个路由的时候,第一个路由可能有表单信息,但切换到第二个路由时,第一个路由里的组件会被销毁,表单里填写的 value 也会消失,keep-alive 就可以帮我们缓存我们不想被销毁的组件。页面效果:父组件代码:<!-- 如果没有 include 属性,那么就会缓存全部子路由组件,这样做是没有必要的,只缓存表单组件即可 --><keep-alive include=’News‘> <router-view></router-vi原创 2021-07-25 20:07:21 · 1188 阅读 · 1 评论 -
Vue动态组件(:is)
概念:让多个组件使用同一个挂载点,并动态切换,这就是动态组件。通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动态组件1、基础用法<div id="example"> <button @click="change">切换页面</button> <component :is="currentView"></component></div><script>v原创 2021-07-25 14:16:18 · 1566 阅读 · 0 评论 -
Vue中$router和$route的常用api
一、$routerrouter是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了许多关键的对象和属性。$router.push// 字符串this.$router.push('home')// 对象this.$router.push({ path: 'home' })// 命名的路由this.$router.push({ name: 'user', param原创 2021-07-25 13:12:55 · 735 阅读 · 0 评论 -
Vue中组件内导航守卫(beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)
在组件中使用路由守卫:beforeRouteEnter (to, from, next) {// 注意,在路由进入之前,组件实例还未渲染,所以无法获取this实例,只能通过vm来访问组件实例 if(userData.status == 0){//userData为接口返回数据。 next(vm => { vm.$message.warning({ showClose: true, message: '不符合原创 2021-07-21 08:46:27 · 1154 阅读 · 1 评论 -
Vue中的全局导航守卫(beforeEach、afterEach)
在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录,前端可以判断,后端也会进行判断的,我们前端最好也进行判断。vue-router 提供了导航钩子:全局前置导航钩子 beforeEach 和全局后置导航钩子 afterEach,他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在 beforeEach 导航钩子中进行判断。导航钩子有3个参数:1、to:即将要进入的目标路由对象;2、from:当前导航即将要离开的路由对象;3、next :调用该方法后,才能进入下一个钩原创 2021-07-21 08:29:11 · 17802 阅读 · 0 评论