1、正则限制输入框最长为两位小数
/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
2、CSS设置页面footer始终在页面底部
// html <body> <div id="app"> <div class="footer"></div> </div> </body>
// CSS body { position:absolute; width:100%; min-height:100%; } #app { padding-bottom: 200px; height: 100%; font-family: "Microsoft Yahei", Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #333; min-width: 1190px; } footer { clear: both; position: absolute; bottom: 0px; width: 100%; background: #000; color: #fff; min-width: 1200px; height: 200px; }
3、iview poptip弹窗中渲染表格
ruleColumns: [{ title: "标题", key: "key", minWidth: 150, align: "left", render: (h, {row}) => { return h('Poptip', { props: { trigger: "hover", }, }, [ h('Table', { slot: 'content', props: { columns: this.ruleColumns, data: this.data } }) ]) } }]
4、VUE点击其他地方关闭弹窗
1、原生方法
// html <div id="box"></div>
// js document.addEventListener('click',(e)=>{ let box = document.getElementById('box'); if(box.contains(e.target)){ alert('在内'); }else{ alert('在外'); } })
2、 Vue写法
// html <div id="box" ref="box"></div>
// js created(){ document.addEventListener('click',(e)=>{ if(!this.$refs.box.contains(e.target)){ this.isShowDialog = false; } }) } // ref是vue获取DOM元素的方法，在标签上绑定ref属性， // js在组件内部用 this.$refs.ref的值调用。
3、第三种方法
给最外层的div加个点击事件: @click="userClick=false" 给点击的元素上面加上： @click.stop="userClick=!userClick" // click.stop 阻止点击事件继续传播 或者给子元素js事件里加上： click(e)=>{ e.stopPropagation(); //阻止事件冒泡 this.userClick = !this.userClick; }
5、如何快速删除子项被选数据？
有两列checkbox数据 A、B。B列是通过A列中选择的数据而来。比如选中 a1,a2,a3那么B列的数据就是这三个。如果A列中取消 a2 那么B列的a2也删除。那么现在B列绑定的 model Blist。在选定 a2 后，如果在A列中把a2 取消，那么如果把blist双向绑定获取的 a2 也删除？
如图：
思路：
点击A的时候获取当前选中数据的所属子项，然后拿该子项中已选的去和全部比对得出未选的，然后拿未选的去blist进行比对，如果blist中出现未选的则将其删除。
let selectList = this.checkAllGroup[index] let selects = [] selectList.map((item) => { selects.push(item) }) let tagsList = this.tags[index].children let tags = [] tagsList.map((item) => { tags.push(item.name) }) let difference = tags.concat(selects).filter(v => tags.includes(v) && !selects.includes(v)) let showTagsArr = this.showTagsArr let intersection = difference.filter(v => showTagsArr.includes(v)) let end = showTagsArr.concat(intersection).filter(v => showTagsArr.includes(v) && !intersection.includes(v)) this.showTagsArr = end
