效果HTML的Table <Card><div ref="print" ><Table width="100%" height="500" size="small" :columns="columns7" :stripe="true" :data="data" border ></Table></div> </Card>JS代码 <script>export default {data () {return {columns7: [{title: 序号,type: index,width: 200},{title: 新批次,width: 350,key:newLots},{title: 数量,key: numLots,width: 350,align: center,render: (h, params) => {var vm = this;return h(di...
跨域 了解同源政策：所谓"同源"指的是"三个相同"。 协议相同域名相同端口相同解决跨域1.jsonp 缺点：只能get请求 ，需要修改B网站的代码 2.cors 这个方案缺点 是 ie6 7 兼容不好（倒是不见得要兼容）。需要B网站在响应中加头 3.postMessage 缺点也是 ie6 7 兼容不好（倒是不见得要兼容）。需要修改B网站的代码 4.iframe window.name 传值得方式很巧妙，兼容性也很好。但是也是需要你能修改B网站代码 5.服务端主动请求B网站，兼容性...
本人第一次写这个 写的不好还望指出来 作为一个由于公司产品的升级然促使我从一个后端人员自学变成前端的开发人员 ！ 公司做的数据管理系统所以离不开表格了 然后表格样式统一啥的就想到封装一个element-ui 里面的table+Pagination了 效果图表格组件的引入与使用 <com-table title="监测数据" v-model="tableData4" @selection-change="handleSelectionChange"><template><el-table-column type="selection" width="55" align="cen...
本文适用人群： 会使用 vue-cli 搭建一个基本的 vue webpack 项目，本文的目录结构基于 webpack 模板结构懂得 axios 基本用法问题导向 日常开发中，前端经常需要通过 ajax 从后端获取数据。而在这种前后端分离的开发模式下，往往前端项目与后端项目的 IP地址、端口号、协议 大概率是不一样的，由于浏览器的安全策略设定，不进行相应配置的话，前端的请求就会被浏览器拦截掉啦。 假设某个页面组件在加载的时候会向后端发送一个请求，...
什么是代理跨域 浏览器之间有同源策略，出于安全考虑不同域之间不允许获取数据，除了几个特殊的例子 <img>、<script>、<audio>等标签可以进行跨域但是通常都是以get的形式，如果用js的axios去远程获取的话进会触发同源政策，除非你服务端的代码设置了header同意让你访问，明显这很不合理呀！。现在不是都流行前后端的分离吗，后端代码跑掉了只剩下前端了，两个次元的代码我前端该怎么获取啊，感觉使用跨域好麻烦好难搞啊还不一定搞...
之前开发一个后台管理系统，里面用到了Vue和Element-UI这个组件库，遇到一个挺有意思的问题，和大家分享一下。 场景是这样，在一个列表展示页上，我使用了Element-UI的表格组件，新的需求是在原表格的基础上支持拖拽排序。但是原有的组件本身不支持拖拽排序，而且由于是直接引入的Element-UI，不方便修改它的源码，所以比较可行的方法只能是直接操作DOM。 具体的做法是在mounted生命周期函数里，对this.$el进行真实DOM的操作，监听...
公司有一个新的需求，点击ElTableColumn的头部可以进行搜索，这个功能同事已经做出来了，但是使用有些不方便，自己就打算封装成一个组件，学习一下。ElTableColumn本来是这个样子的：要做成的是这个样子：我直接就放代码了，挨着挨着说明太多了。 代码的结构：组件 <!-- ElTableColumnPro.vue --> <template><el-table-column v-if="visible" :formatter="formatter" :align=align :prop="prop" :header-align="headerAlign" :labe...
1、安装相关依赖 主要是两个依赖 npm install --save xlsx file-saver如果想详细看着两个插件使用，请移步github。 https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js 2、组件里头引入 import FileSaver from file-saver import XLSX from xlsx3、组件methods里写一个方法 exportExcel () {/* generate workbook object from table */var wb = XLSX.utils.table_to_book(document.querySelector(#out-...
添加全局注册事件，用来监听滚动事件 window.Vue.directive(loadmore, {bind(el, binding) {const selectWrap = el.querySelector(.el-table__body-wrapper)selectWrap.addEventListener(scroll, function() {let sign = 100const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeightif (scrollDistance <= sign) {binding.value()}})} }) sign 用于标记位置 直接让scrollDistance === sign 并不能保证每次都...
什么是跨域？ 同源策略规定了如果两个 url 的协议、域名、端口中有任何一个不等，就认定它们跨源了。 跨域的解决方式有哪几种？ 1.JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。 JSONP实现跨域请求的原理简单的说，就是动态创建<script>标签，然后利用<script>的src 不受同源策略约束来跨域获取数据。 JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般...
2017年底了，总结了这一年多来的前端之路，Vue从入门到放弃，再二进宫，从 Vue1.0 持续跟踪到 Vue2.5。结合公司的一些实际项目，也封装了一些比较实用的组件。 由于现在公司管理平台主要运用Element UI，索性就结合组件Table 和 Pagination 封装了一个支持页面切换的Table组件，不啰嗦，直接上代码。 2、实现思路 2.1、Element UI 引入(整体引入) main.js // Element UI import Element from element-ui // 默认样式 import elemen...
饿了么的table组件功能很强大，对于项目中的各种表格基本够用，但是……个人对于它以列为单位的操作不习惯 =。=所以改成了另一种方式（我不会告诉你其实本质没变）。项目中表格较多，所以复用性最重要 步骤一先来个基本的表格展示 官例的tableData tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄 }, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄 }, {date: 2016-05...
?其实在去年小颖已经写过一篇：Vue.js实现checkbox的全选和反选 小颖今天在跟着慕课网学习vue的过程中，顺便试试如何在table中实现全选和反选，页面的css样式是直接参考慕课网的样式写的，js是小颖自己写哒，欢迎大家吐槽和点赞，嘻嘻 demo的 git 地址：ShoppingCart 页面效果：具体怎么实现的呢？ 使用localstorage来存储页面信息 中已经有写项目是怎么创建的所以小颖在这里就不重复了，其实只是在上篇文章的基础上稍微做了改动...
现在有一个使用mybatis的分页插件生成的table，table中数据是通过vue获得的 ， 前台显示使用<tr v-for="item in items"> 后台vue获取数据使用分页插件进行查询然后使用回调,将结果返回给vue的一个model /*** 分页控件加载* @param data*/ function aspnetPagerInfoIM(pageDataShow,pageModule,resource, modelCallBack) {var pageDataShow = $("#"+pageDataShow);var pageModule = $("#"+pageModule);pageDataShow.empty();pageMod...
这里请求的是知乎日报的api，由@izzyleung这位大神提供的，这是github地址。 在vue-cli构建的项目中先安装axios npm install axios -S这里暂不考虑用vuex封装的方式，只讲在当前组件中直接使用。 先在<script>中引入用prototype将axios添加为vue原生的属性，$ajax相当于axios的别名。 然后在要调用的方法或是钩子中请求，$ajax就是上面注册的axios，如果想直接用axios不想设置prototype也可以直接按官方的文档来写vue在配置文件中提...