Vue限制输入框内容只能输入金额或数字 <template> <input @input="formatValue(value)" v-model="value"> </template> <script> export default = { data(){ return { value: "" } }, methods：{ // 只允许输入数字，其他一律不允许输入 formatValue(val){ this.value = this.value.replace(/[^\d]/g, "") }, // 只允许输入金额类型，最大两位小数（如：3.88） formatValue(val){ val = val.replace(/(^\s*)|(\s*$)/g, ""); if (!val) return this.value = ""; val = val.replace(/[^\d.]/g, ""); val = val.replace(/^\./g, ""); val = val .replace(".", "$#$") .replace(/\./g, "") .replace("$#$", "."); val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); this.value = val; }, } } </script>

JS通过解构或Object.assign去合并2个对象 在封装插件的时候，经常会碰到传入参数和默认参数的问题，如果调用者没有传递参数，那么使用插件的内置属性，如果传递了，那么就设置成传递的参数，例如：这是一个弹窗插件class Dialog { constructor(options = {}) { // 插件的默认配置 const defaultOption = { title: "提示", size: "small", show: false } for (let key in options) { defaultOption[key] = options[key] } } } new Dialog({ title: '标题', size: 'mini' })传统的会使用上面的for循环，然后将默认参数里的参数替换掉，在ES6出来后，上面的写法就可以改成下面的简写第一种方式class Dialog { constructor(options = {}) { // 插件的默认配置 const defaultOption = { title: "提示", size: "small", show: false, // 通过展开运算符 ...options } } }第二种方式class Dialog { constructor(options = {}) { // 插件的默认配置 const defaultOption = { title: "提示", size: "small", show: false } // 通过Object.assign方法 const newOption = Object.assign(defaultOption, options) } }

Vue面包屑导航实现方案 例如想实现一个 首页 / 项目列表 / 我的项目 这样的面包屑1、首先在路由js文件里写上面包屑对应的名称router.jsexport default [ { path: "/", children: [ { path: "/todoList", component: TodoList, name: "todoList" meta: { breadName: "项目列表" } }, { path: "/todoList/mylist", component: MyList, name: "mylist" meta: { breadName: "我的项目" } }, ] } ]2、编写面包屑组件<template> <a-breadcrumb class="breadcrumb"> <a-breadcrumb-item v-for="(breadcrumb, index) in breadcrumbList" :key="index"> {{breadcrumb.meta.breadName}} </a-breadcrumb-item> </a-breadcrumb> </template> <script> export default { computed: { breadcrumbList () { // 先定义一个变量 用于存放计算出来的导航数组 let breadArr = [] // 获取当前页面的路由， 并将路由字符串截取第一个/， 然后组成数组 let path = this.$route.path.substr(1).split("/") // >>> ["todoList", mylist] // 获取所有页面的路由地址，通过this.$router.options拿到， 具体样子可以打印看看 const allRouter = this.$router.options.routes[0].children // 然后循环allRouter找到里面中符合的path的2个，将他们存起来 allRouter.forEach(_ => { // 判断path的每一项是否有allRouter里的某项 if (path.some(_item => _item === _.name)) { breadArr.push(_) } }) console.log(breadArr) // 打印下看看数据是否正确， 如果为两项， 并且每项里面都有meta内容， 则正确 // 因为这个数组里是没有 首页 这一项的， 我们自己手动添加一个就好, 此时用到unshift breadArr.unshift({ path: "/", meta: { breadName: "首页" } }) // 最后computed 需要return出去， return出去这个数组就好了 return breadArr } } } </script>

Vue中导出表格插件，简单实用 安装插件npm install --save xlsx在项目中使用插件<template> <div @click="exportExcel">开始导出</div> </template> <script> import XLSX from 'xlsx' export default { methods: { /* 点击导出表格事件 */ exportExcel(){ /* 假设这是后端返回的数据 */ let data = [{ itemId: 111, title: "ces", link: "aaaa" }, ....] /* 将数据重新格式化下 */ let newData = this.filterXlsx(data) console.log(newData) /* 新建空workbook，然后加入worksheet */ let ws = XLSX.utils.json_to_sheet(data) // 设置每列的宽度, 第几个对象代表第几列 ws['!cols'] = [ { 'wch': 15 }, { 'wch': 50 } ] /* 新建book */ let wb = XLSX.utils.book_new() /* 生成xlsx文件(book,sheet数据,sheet命名) */ XLSX.utils.book_append_sheet(wb, ws, '商品监控页汇总数据导出') /* 写文件(book,xlsx文件名称) */ XLSX.writeFile(wb, '商品监控页汇总数据表.xlsx') } /* 导出表格的数据 */ filterXlsx(data) { let xlsxData = [] data.forEach(item => { xlsxData.push({ 商品ID: item.itemId, 商品名称: item.title, 商品链接: item.link, }) }) return xlsxData }, } } </script>

ElementUI表格不调用后端接口实现分页功能 <!-- 主要是使用slice对数组进行切割 --> <el-table border :data="itemList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"> .... </el-table> <script> data() { return { // 所有的数据列表 itemList: [....], // 当前页码 currentPage: 1, // 分页尺寸 pageSize: 10, // 分页总数 pageTotal: 30 } } </script>

Css设置单行文本多行文本溢出隐藏并以省略号显示 单行文本溢出white-space: nowrap; text-overflow: ellipsis; overflow: hidden;两行溢出display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;