批量选择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 Details1.设置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 Detailsobj.concat(arrayx,arrayy); ver a = [1,2,3]; var b = [4,5]; a.concat(b);//1,2,3,4,5
View Details今天看了一下 有好几种方法 总结一下 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 Details原因： 使用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 Details1. 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 Detailsvant（轻量级，适合微信公众号项目使用） [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 Details有项目需要用到ExtJS，而且是老版本的，MVC的开发方式，前后端分离。 经过几天的学习，做了个demo，供大家学习参考。直接上图~ 源码下载
View Details参考自：https://blog.csdn.net/luckypeng/article/details/43151793 介绍： 使用ExtJS MVC构建出如下图框架。 ps： 此实验是接着 "ExtJS MVC框架搭建（三）" 教程后面做的， 所以主页为 index2.html, JS文件为 app2.js 一、自定义一个viewport组件 新建 app/view/Viewport.js 文件， 内容如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
Ext.define('OA.view.Viewport', { extend: 'Ext.container.Viewport', //布局方式：border layout: 'border', items: [{ title:'ExtJS案例', collapisble: true, region:'north', height: 100, html: '<br><center><font size=5>MVC模式实现的ExtJS案例</font><br><font size=2>' + '源码来源:ITLee博客</font></center>' },{ title: '功能菜单', region: 'west', width: 180, split: true, collapisble: true, items:[{ xtype: 'menutree' }] }, { region: 'center', id: 'mainContent', xtype:'tabpanel', layout: 'fit', collapisble: true }] }); |
ps：①自定义的试图组件继承了 Ext.container.Viewport , 且采用的border布局 ②border布局的 中间部分（region: "center"）为tabpanel ③border布局的 左边部分（region:’west’）里面放着是 树型面板（xtype: 'menutree', menutree 继承了 treepanel， 下一步介绍menutree） 二、定义一个 treepanel组件 新建 app/view/MenuTree.js 文件，内容如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
Ext.define('OA.view.MenuTree', { // 定义一个菜单组件 extend: 'Ext.tree.Panel', alias: 'widget.menutree', //给菜单组件取个别名：menutree， 在viewport组件中有用到 border: false, //规定锚链接地址的显示区域 hrefTarget: 'mainContent', //是否显示根节点 rootVisible: false, //数据集 store: 'MenuStore' }); |
ps：①、 自定义的 MenuTree 菜单组件，该组件继承 treepanel ②、store :’MenuStore' 指定了菜单面板的数据集，下一步会定义 这个 MenuStore 数据集 三、定义一个 store 组件 新建 app/store/MenuStore.js 文件， 内容如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Ext.define('OA.store.MenuStore', { extend: 'Ext.data.TreeStore', autoLoad: true, proxy: { type: 'ajax', url: 'data/data.json', reader: { type: 'json', root: 'children' } } }); |
ps：①、定义的store组件，继承 Ext.data.TreeStore ②、 配置 autoLoad: true， 以便自动加载数据 ③、 配置 proxy 加载远程数据， 请求地址为 data/data.json, 下一步就创建这个文件 四、定义 json 数据 用于创建 树型结构 新建 webapp/data/data.json 文件，内容如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
[ { "id": "2", "text": "用户管理", "leaf": false, "url": "http:\/\/www.lihuai.net", "children": [ { "id": "5", "text": "基本信息", "leaf": true, "url": "http:\/\/www.sogou.com", "children": "" }, { "id": "11", "text": "信息管理", "leaf": true, "url": "http:\/\/www.sogou.com", "children": "" }, { "id": "12", "text": "添加用户", "leaf": true, "url": "http:\/\/www.sogou.com", "children": "" } ] }, { "id": "3", "text": "产品管理", "leaf": false, "url": "http:\/\/www.so.com", "children": [ { "id": "7", "text": "产品信息", "leaf": true, "url": "http:\/\/www.so.com", "children": "" }, { "id": "8", "text": "产品添加", "leaf": true, "url": "http:\/\/www.so.com", "children": "" } ] } ] |
五、定义 Main控制器，用于管理这些对象 新建 app/controller/Main.js […]
View Details背景 本来不打算写这篇文章的，但是按照官方文档的介绍，还是会出现一些问题。该文章就是简洁的介绍一下如何使用Sencha Cmd及其注意事项。 官方文档 Introduction to Sencha Cmd Using Sencha Cmd with Ext JS 4.2+ Compiler-Friendly Code Guidelines Workspaces in Sencha Cmd 环境要求 Java Run-time Environment or JRE，版本>=6.0。 Ruby，不要下载最新版，Ruby 1.9.3-p392可以。 Sencha Cmd。 Ext JS SDK。 创建一个workspace 目录名称不要用中文，特殊符号最好也不要用，中文我测试了不行。
|
1 2 |
1 cd /d F:\ExtJs4.2\ext-4.2.0.663 2 sencha generate workspace F:\ExtJs4.2\MyWorkspace |
创建两个app（一个app一个html）
|
1 2 3 4 5 |
1 cd /d F:\ExtJs4.2\ext-4.2.0.663 2 sencha generate app App1 F:\ExtJs4.2\MyWorkspace\app\app1 3 4 cd /d F:\ExtJs4.2\ext-4.2.0.663 5 sencha generate app App2 F:\ExtJs4.2\MyWorkspace\app\app2 |
编译创建的两个app
|
1 2 3 4 5 |
1 cd /d F:\ExtJs4.2\MyWorkspace\app\app1 2 sencha app build 3 4 cd /d F:\ExtJs4.2\MyWorkspace\app\app2 5 sencha app build |
结果 项目结构 编译后的运行效果 备注 sencha cmd 必须运行在SDK目录或app目录，具体的可以参考官方文档。 from:https://www.cnblogs.com/happyframework/archive/2013/05/07/3060630.html
View Details