element table 批量获取选择的行的数据(selection 勾选框)
批量选择table 的行数 代码实现: 在<el-table >添加属性 ref = "multipleTable " , 在<el-table-colum> 添加type属性 type=" selection "
|
1 |
再通过一下代码就能获取已选择的行的数据;
|
1 |
this.$refs.multipleTable.selection |
这里的 multipleTable 是上面ref 的值; from:https://blog.csdn.net/weixin_42517975/article/details/89631128
View Detailselement-ui table 怎么保持选择状态
1.设置row-key
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<el-table :border="true" :highlight-current-row="true" v-loading="loading" element-loading-text="数据加载中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" ref="multipleTable" :data="partList" :row-key="getRowKey" tooltip-effect="dark" style="width: 100%" @select-all="handleSelectionAll" @selection-change="handleSelectionChange"> getRowKey (row) { return row.code }, |
2.设置选择行状态 :reserve-selection=“true”
|
1 |
<el-table-column align="center" :reserve-selection="true" type="selection" width="55"></el-table-column> |
from:https://blog.csdn.net/weixin_43153741/article/details/104842331
View Detailsjs连接两个或多个数组的方法
obj.concat(arrayx,arrayy); ver a = [1,2,3]; var b = [4,5]; a.concat(b);//1,2,3,4,5
View Detailsjs判断一个数组是否包含一个指定的值
今天看了一下 有好几种方法 总结一下 1:array.indexOf 此方法判断数组中是否存在某个值,如果存在返回数组元素的下标,否则返回-1
|
1 2 3 |
let arr = ['something', 'anything', 'nothing', 'anything']; let index = arr.indexOf('nothing'); console.log(index) //结果是2 |
2. array.includes(searchElement[, fromIndex]) 此方法判断数组中是否存在某个值,如果存在返回 true,否则返回false。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function test(fruit) { const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries']; if (redFruits.includes(fruit)) { console.log('red'); }else{ console.log('blue'); } } test('aple')//结果是red |
3. array.find(callback[, thisArg]) 返回数组中满足条件的第一个元素的值,如果没有,返回undefined
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// ---------- 元素是普通字面值 ---------- let numbers = [12, 5, 8, 130, 44]; let result = numbers.find(item => { return item > 8; }); console.log(result) # 结果: 12 // ---------- 元素是对象 ---------- let items = [ {id: 1, name: 'something'}, {id: 2, name: 'anything'}, {id: 3, name: 'nothing'}, {id: 4, name: 'anything'} ]; let item = items.find(item => { return item.id == 3; }); console.log(item) # 结果: Object { id: 3, name: "nothing" } |
4. array.findIndex(callback[, thisArg]) 返回数组中满足条件的第一个元素的索引(下标), 如果没有找到,返回-1 同第3种方法类似 from:https://www.cnblogs.com/hepengqiang/p/9822118.html
View DetailsCSGO国服变成红色血液方法(反和谐)
1. 我的电脑D:\Program Files (x86)\Steam\steamapps\common\Counter-Strike Global Offensive\csgo 里面的三个文件 pakxv_perfectworld_000 pakxv_perfectworld_001 pakxv_perfectworld_dir 剪切 2.新建一个叫bak文件夹 3.把这三个文件剪切复制进这个bak文件夹就OK了,进游戏就不冒石油了是红色血液
View DetailsIE浏览器error:Promise未定义
原因: 使用axios会报错,因为axios本质上是封装了ES6语法的promise,而promise在ie上并不兼容。 解决办法: 引入babel-polyfill,babel-polyfill相当于一个ES6的兼容垫片,会让浏览器读懂 1、终端输入命令:npm install --save babel-polyfill (安装了淘宝镜像的话可以用 cnpm install --save babel-polyfill) 2、在main.js文件的顶部引入 import "babel-polyfill" 3、在build目录下webpack.config.js文件设置入口改为如下 (如果你的项目用的是脚手架,在在build目录下webpack.base.config.js文件更改入口)
|
1 2 3 4 5 |
model.exports={ entry:{ app;["babel-polyfill",'./src/main.js'] } } |
作者:听风_ead5 链接:https://www.jianshu.com/p/e7c6a30cfb13 来源:简书 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
View DetailsCSS布局之-高度自适应
何为高度自适应? 高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容。高度自适应不像宽度自适应那样简单,在兼容浏览器方面也稍微复杂一些。 布局思路 在IE7+及chrome、firefox等浏览器中,高度自适应可以利用绝对定位来解决。但一个元素是绝对定位时,如果没有给它设定高度或宽度,则它的的高度和宽度是由它的top、right、bottom、left属性决定的,但这一法则在IE6中并不适用,因此在IE6中还得另辟蹊径。在IE6中给html设定padding,并不会撑大html元素的尺寸,这正是我们要利用的地方。 在IE7+ 和 W3C浏览器中的方案 看下代码: 再看下效果: 在IE6中的方案 好吧,不想再对IE6吐槽,只想尽快搞定它。 在IE6中的思路是,把html和body元素的高度设定为100%,即浏览器窗口的高度,然后利用padding-top在html元素上挤出一点空间来,因为绝对定位的最高参照物是参照html元素的,所以可以把顶栏绝对定位在html的padding-top那块空间上。这时body的高度就是html的高度(也是浏览器窗口的高度)减去html的padding-top的值,这也是ie6非常奇怪的一个特性,因为按照w3c盒模型来讲,增加了html元素的padding-top,则html元素的高度也会相应增加,这时浏览器窗口应该会出现垂直滚动条了。但IE6不会,html的增加了padding-top后,整个html元素的高度还是保持不变,即浏览器窗口的高度,变化的是body的高度减小了,用来抵消html的padding-top. 还是先看看代码吧: 再看下效果: 最终的兼容代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>高度自适应布局</title> <style> html,body{ height:100%;} body,div{ margin:0; padding:0; color:#F00;} * html{ padding-top:100px;}/*for ie6*/ .top{ background:#36C; height:100px;} * html .top{ background:#36C; height:100px; position:absolute; top:0; width:100%;}/*for ie6*/ .main{ background:#F90; position:absolute; width:100%; top:100px; bottom:0; overflow:auto;} * html .main{ background:#F90; position:static; height:100%;}/*for ie6*/ </style> </head> <body> <div class="top">我是top,固定高度</div> <div class="main">我是main,高度随浏览器大小变化而变化<p style="height:500px;"></p></div> </body> </html> |
效果图: 非ie6 ie6 推广 这种方法也适用于顶栏与底栏高度固定,中间那栏高度自适应的三栏布局 来源: <http://www.cnblogs.com/2050/archive/2012/07/30/2615260.html> from:https://www.cnblogs.com/zhrn/p/4464762.html
View Details7个基于VUE移动端UI好用框架!
1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k 中文文档 在线预览 https://wangdahoo.github.io/vonic/docs/#/home 2.vux 基于WeUI和Vue(2.x)开发的移动端UI组件库 star 10k 基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式。 中文文档 在线预览 https://vux.li/demos/v2/?x-page=v2-doc-home#/ 3.Mint UI 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库 star 8.3k 中文文档 github地址 在线预览 https://github.com/ElemeFE/mint-ui 4.MUI 最接近原生APP体验的高性能前端框架 star 7.5k 中文文档 github地址 http://dev.dcloud.net.cn/mui/ 5.Muse-ui 基于 Vue 2.0 和 Material Design 的 UI 组件库star 4.9k 中文文档 github地址 https://github.com/museui/muse-ui 6.Vant是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件。star 1k 中文文档 github地址 https://github.com/youzan/zent 7.Cube UI star 3k 滴滴 WebApp 团队 实现的 基于 Vue.js 实现的精致移动端组件库 github地址 中文文档 https://github.com/didi/cube-ui 特性 质量可靠 由滴滴内部组件库精简提炼而来,经历了业务一年多的考验,并且每个组件都有充分单元测试,为后续集成提供保障。 体验极致 以迅速响应、动画流畅、接近原生为目标,在交互体验方面追求极致。 标准规范 遵循统一的设计交互标准,高度还原设计效果;接口标准化,统一规范使用方式,开发更加简单高效。 扩展性强 […]
View Details比较好用的vue框架
vant(轻量级,适合微信公众号项目使用) [https://youzan.github.io/vant/#/zh-CN/intro] iview https://www.iviewui.com/ Ant Design Vue [https://www.antdv.com/docs/vue/introduce/] element http://element.eleme.io/ vuetify https://vuetifyjs.com/ vue-strap http://yuche.github.io/vue-st… cube-ui https://didi.github.io/cube-ui/#/zh-CN/example buefy https://buefy.github.io/#/ vue-beauty https://fe-driver.github.io/vue-beauty/#/components/button vue-storefront http://vuestorefront.io/ at-ui https://at-ui.github.io/at-ui/#/zh vue-blu https://chenz24.github.io/vue-blu/#/ vux https://vux.li/ 光子补充:vuetifyjs https://vuetifyjs.com/en/components/timelines/ 作者:曾经也是个少年 链接:https://www.jianshu.com/p/69729b7f9871 来源:简书 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
View DetailsExtJS MVC 4.2 Demo
有项目需要用到ExtJS,而且是老版本的,MVC的开发方式,前后端分离。 经过几天的学习,做了个demo,供大家学习参考。直接上图~ 源码下载
View Details