q1424966670的博客

想想如果从最顶层组件传一个 data 给最底层组件，仅仅使用父子传递的方式会变得十分麻烦。而 EventHub 就是用来解决这个问题的：在需要获取 data 的组件上设置一个监听器，每次要传递 data 时，那个组件就广播这个事件并调用这些监听器。我们不难发现 EventHub 的主要功能就两个： 监听和广播，当然还有去掉监听器。而 Vue 刚好给我们提供了这些功能，我们可以使用 Vue 来描述这些功能：let eventHub = new Vue()// 监听eventHub.$on('e

1、如果打印出来，表格的列缺失原因：table-layout: fixed导致的让表table布局更加符合预期，普通使用table时，其table-layout默认值是auto，导致表格第二行和第一行不一样宽，也就是两行的宽度不对齐。而使用：table { table-layout: fixed; }则会让表的布局以第一行为准，设置表格的宽度，然后其他行的表格宽度就按照第一行为准。一般表格第一行是表头标题，第二行以后是数据行，也就是让数据行的每列宽度向第一行列宽度看齐。...

1、下载插件print.js2、放入plugins文件夹下3、在main.js引入import Print from './plugins/print'Vue.use(Print) // 注册4、使用例子注意点：在需要打印的地方绑定ref 不需要打印的地方添加no-print样式类 打印方法：this.$print(this.$refs.xxx)，xxx代表你绑定的ref 也可以自定义不需要打印的样式类，使用方法如下： <div class.

1、安装插件npm install vue-print-nb --save2、在main.js文件中引入import Print from 'vue-print-nb'Vue.use(Print); //注册3、使用例子注意点：id是printTest，v-print是'#printTest'<div id="printTest" > <p>满堂花醉三千客</p> <p>一剑霜寒十四州 </p&gt.

文字超出省略指令 v-ellipsis参数 Attributes：参数 说明 默认值 类型 可选 width 元素宽度 100 Number 必填 <div v-ellipsis:100> 需要省略的文字是阿萨的副本阿萨的副本阿萨的副本阿萨的副本</div>export default function (el, binding) { el.style.width = `${binding.arg .

第一版。排序目前还没做，不支持自定义排序<template><div> <div id="box"> <el-table :data="tableData.slice((page.currentPage - 1) * page.pageSize, page.currentPage * page.pageSize)" ref="table" style="width: 100%" border height="400"> ..

列是根据json数组生成的 点击编辑，会根据行数据生成对应的表单<template><div> <el-table :data="tableData" style="width: 100%"> <el-table-column v-for="item in formList" :prop="item.prop" :key="item.prop" :label="item.label"></el-table-colu..

<template> <div> <div id="div1" contenteditable="true" ></div> <div class="block" style="margin: 20px"> <el-button type="primary" style="margin-left: 20px" @click="delDate">主要按钮</el-bu.

下面是demo，复制过去即可运行下面是demo，复制过去即可运行 讲解一下第一个secelt选择，只有选中特定的选项，第二个secelt才可多选 data.key即特定的选项，这里只写了一个，如果是多个的话，可以这样 data() { return { key: ["1","5"] } } 注意点： 数组元素的类型要和option的value类型对应上 对应的，多选条件的判断也要改一下 <el-s...

接上篇文章，需要用到Export2Excel、Blob等js文件提取码：s8ci下面demo是把table的json数据导出为多个sheet的Excel，同时也是支持自定义列导出找到Export2Excel.js，把下面代码复制到最后即可export function export_json_to_excel_in_sheet(jsonData, defaultTitle) { var wb = new Workbook(); for(let i=...

下载Export2Excel、Blob等js文件提取码：s8ci下面demo是把table的json数据导出为单个sheet的Excel，相对于上一篇文章，支持自定义列导出，不是把表格的列全部导出<template> <div> <el-button type="primary" @click="export2Excel()">导出Excel</el-button> </div></tem...

引入工具库，下面代码是democnpm install -S file-saver xlsxcnpm install -D script-loader<template> <div> <el-button type="primary" @click="exportExcel">导出文件</el-button> <el-table :data="tableData" style="width: 100%" id=.

在<el-table>标签加:cell-class-name="cellClass"在<el-table-columntype="selection">标签加:selectable="selectable" ，如果不加，会出现单元格复选框全部选中，但是表头复选框还是半选状态<div id="app"> <el-table ref="multipleTable" :data="tableData" tooltip-effect="d...

constrouter=newVueRouter({//mode:"history",mode:"hash",base:process.env.BASE_URL,routes});把history模式改成hash模式

vue-cli4.0运行yarn build打包之后，页面打开报这个错误，经过查询之后，这是路径错误导致的所以在项目最外层新建vue.config.js在js里面加入下面代码module.exports={ publicPath : './'}如果你是3.3版本之前的，用下面这个写法module.exports={ baseUrl: './'}...

vue3.0版本中 执行npm run build会出现报错Invalid options in vue.config.js: "baseUrl" is not allowed这是因为vue cli3.3之后废除了baseUrl,在这之后需要使用publicPathmodule.exports ={ publicPath: process.env.NODE_ENV === 'production' ? './' : '/'}...

在VUE中路由遇到Error: Avoided redundant navigation to current location:报错显示是路由重复，虽然对项目无影响，但是看到有红的还是不舒服。于是查了一下发现可以这样解决在你引入VueRouter的时候再加上一句话：const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return orig...

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令下面定义了一个v-test指令绑定数据name<template> <div class="hello"> <div v-test='name'></div> </div></template><script>export de...

转载请标明出处，全网最新vue4.x解决办法，谢谢。先描述问题//1.依赖包：npm install echarts -Snpm install echarts-gl -S//2main.js:import echarts from ‘echarts’import ‘echarts-gl’Vue.prototype.$echarts = echarts按照这个步骤安装之后，发现node_modules下只有echarts-gl文件夹然后页面报错Component series

<el-form :model="form" ref="form" :rules="rules" > <el-form-item label="编码" :label-width="formLabelWidth"> <el-input v-model="form.codenum" :disable...

vue-cli@3.0之后，element-ui提供相应的element插件，我们可以用这个插件快速的来安装element-ui。只需要cd到工程根目录，运行vue add element即可：vue add element1，选择全部导入2，第二步 选择Y3，第三步直接回车...

vue-cli3.0以前启动项目是用npm run dev,现在直接升级到vue-cli 4.3.1结果用yarn serve，感觉很不习惯那如何修改为npm run dev呢?可以直接在package.json文件里面把serve修改dev即可。方法/步骤1、使用vue-cli3搭建项目，然后使用 npm run dev 命令运行发现项目运行报错。2、找到package.json文...