说到表格，虽说随着前端技术的发展div已经遍地开花彻底推翻了table布局的时代。可是当遇到报表之类的操作是table还是非常值得使用的。 由于操作表格的时候不可避免使用到细边框效果，所以我就整理了一下常用的三种实现细边框表格的方式，分享给大家，代码如下：
|
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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>细边框表格的实现方式</title> <style> /*可以应用于所有浏览器,但是需要设置table的标签属性:border="0" cellpadding="0" cellspacing=1*/ .demo1 { background-color: #ccc; } .demo1 th,.demo1 td { background-color: #fff; } /* 利用表格样式:{border-spacing:0px;}和表格与单元格背景色的不同来实现细边框。[注:IE7及以前的浏览器不支持border-spacing]*/ .demo2 { background-color: #ccc; border-spacing: 1px; } .demo2 th, .demo2 td { background-color: #fff; } /* 为表格设置合并边框模型:{border-collapse: collapse;} 实现细边框。[注:如果没有规定 !DOCTYPE,则 border-collapse 可能产生意想不到的结果。] */ .demo3 { border: 1px solid #ccc; border-collapse: collapse; } .demo3 th, .demo3 td{ border: 1px solid #ccc; } </style> </head> <body> <p>Demo1</p> <table class="demo1" border="0" cellpadding="0" cellspacing="1"> <thead> <tr> <th>Title1</th> <th>Title2</th> <th>Title3</th> </tr> </thead> <tbody> <tr> <td>Row1-01</td> <td>Row1-02</td> <td>Row1-03</td> </tr> <tr> <td>Row2-01</td> <td>Row2-02</td> <td>Row2-03</td> </tr> </tbody> </table> <p>Demo2</p> <table class="demo2"> <thead> <tr> <th>Title1</th> <th>Title2</th> <th>Title3</th> </tr> </thead> <tbody> <tr> <td>Row1-01</td> <td>Row1-02</td> <td>Row1-03</td> </tr> <tr> <td>Row2-01</td> <td>Row2-02</td> <td>Row2-03</td> </tr> </tbody> </table> <p>Demo3</p> <table class="demo3"> <thead> <tr> <th>Title1</th> <th>Title2</th> <th>Title3</th> </tr> </thead> <tbody> <tr> <td>Row1-01</td> <td>Row1-02</td> <td>Row1-03</td> </tr> <tr> <td>Row2-01</td> <td>Row2-02</td> <td>Row2-03</td> </tr> </tbody> </table> </body> </html> |
|
1 2 |
<strong>效果图： </strong> |
from:https://www.cnblogs.com/kutimes/p/5054357.html
View Details现在遇到一个需求要删掉下标为index的元素，下面介绍两种方法： 一、splice：删除后，后面的元素自动填补到前面 arr.splice(index, 1) 举例：现在有数组 arr=['a',’b',’c',’d'] arr.splice(1, 1); //结果arr=['a',’c',’d']（下标1开始，删除1个） 注意： 上面的代码中，我们要注意，如果想修改 arr 的值，直接这样操作 arr 直接就变了，而不要写作 arr= arr.splice(1,1)，因为 splice() 方法的返回值为删除掉的元素。 补充： spice增加： arr.splice(1,0,’str'); //结果arr=['a',’str',’b',’c',’d'] spice替换： arr.splice(1,1,’str'); //结果arr=['a',’str',’c',’d'] spice替换2： arr.splice(1,2,’str'); //结果arr=['a',’str',’d']（就是说：下标1开始2个换成1个“str”） spice删除多个： arr.splice(1,2); //结果arr=['a',’d'] 二、delete:删除后，该下标位置元素为undefined deletearr[index];//结果arr=['a',undefined,’c',’d'] from:https://www.cnblogs.com/belongs-to-qinghua/p/12393296.html
View Details实现功能：使用富文本编辑器编写文章，然后把编写成功的文章用子组件显示。 问题描述：父组件给子组件传递数据，子组件第一次调用数据的时候页面渲染是正常的，当数据变化的时候，子组件的页面渲染就失效了。 问题判断：通过一次次测试发现，第一次打开子组件的时候页面的渲染是正常的，后面打开之后渲染就失效了。所以初步怀疑是第二次调用组件的时候没有对数据进行渲染。 解决方案一： 当数据变更后,通过watch 监听，先去销毁当前的组件，然后再重现渲染。使用 v-if 可以解决这个问题
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<template> <third-comp v-if="reFresh"/> </template> <script> export default{ data(){ return { reFresh:true, menuTree:[] } }, watch:{ menuTree(){ this.reFresh= false this.$nextTick(()=>{ this.reFresh = true }) } } } </script> |
解决方案二： 通过vue key 实现，原理官方文档。所以当key 值变更时，会自动的重新渲染。（推荐）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<template> <third-comp :message="menuData" :key="menuKey"/> </template> <script> export default{ data(){ return { menuKey:1, menuData: "", } }, watch:{ menuData(){ ++this.menuKey } } } </script> |
from:https://www.cnblogs.com/zyulike/p/12036456.html
View Details1. find()与findIndex() find()方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。 [1, 2, 5, -1, 9].find((n) => n < 0) //找出数组中第一个小于 0 的成员 // -1 find()方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。 findIndex()方法的用法与find()方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。 [1, 2, 5, -1, 9].findIndex((n) => n < 0) //返回符合条件的值的位置（索引） // 3 2. filter() filter()方法使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组。 filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。filter 不会改变原数组。 var arr = [10, 20, 30, 40, 50] var newArr = arr.filter(item => item > 30); console.log(newArr); //[40, 50] //数组去重 var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7, 8, 8, 0, 8, 6, 3, […]
View Details数组与字符串相互转换方法
toString() 将数组转换成一个字符串
toLocalString() 把数组转换成本地约定的字符串
join() 将数组元素连接起来以构建一个字符串
批量选择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 Details