表格内容溢出显示省略号浮空提示内容 表格列数据组件内容显示封装<template> <el-tooltip :key="key" :disabled="tipShow" placement="top" effect="light" popper-class="popper-class" > <template #content> <span :class="newLine === 'true' && 'new-line'">{{ content }}</span> </template> <p ref="tipContent" v-resize:200="onResize" class="tips"> <slot>{{ content }}</slot> </p> </el-tooltip> </template> <script> import { computed, defineComponent, ref, onMounted } from 'vue' export default defineComponent({ name: 'tips', isComponents: true, props: { content: { type: null, required: true, default: '' }, attributes: { type: Object, default: () => {} }, newLine: { type: String, default: '' }, key: { type: null, default: Date.now() + '-' + Math.floor(Math.random() * 10000) } }, setup(props) { const tipContent = ref(null) const tipShow = ref(true) const getBoolean = () => { if ( props.content && tipContent.value && tipContent.value.scrollWidth > tipContent.value.clientWidth ) { return false } if (props.attributes && props.attributes.hasOwnProperty('disabled')) { return props.attributes.disabled } return true } onMounted(() => { tipShow.value = getBoolean() }) const onResize = () => { tipShow.value = getBoolean() } return { tipContent, tipShow, onResize } } }) </script> <style lang="scss" scoped> .tips { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .line { white-space: pre; } </style> <style lang="scss"> .popper-class { max-width: 900px; } </style> <template> <el-tooltip :key="key" :disabled="tipShow" placement="top" effect="light" popper-class="popper-class" > <template #content> <span :class="newLine === 'true' && 'new-line'">{{ content }}</span> </template> <p ref="tipContent" v-resize:200="onResize" class="tips"> <slot>{{ content }}</slot> </p> </el-tooltip> </template> <script> import { computed, defineComponent, ref, onMounted } from 'vue' export default defineComponent({ name: 'tips', isComponents: true, props: { content: { type: null, required: true, default: '' }, attributes: { type: Object, default: () => {} }, newLine: { type: String, default: '' }, key: { type: null, default: Date.now() + '-' + Math.floor(Math.random() * 10000) } }, setup(props) { const tipContent = ref(null) const tipShow = ref(true) const getBoolean = () => { if ( props.content && tipContent.value && tipContent.value.scrollWidth > tipContent.value.clientWidth ) { return false } if (props.attributes && props.attributes.hasOwnProperty('disabled')) { return props.attributes.disabled } return true } onMounted(() => { tipShow.value = getBoolean() }) const onResize = () => { tipShow.value = getBoolean() } return { tipContent, tipShow, onResize } } }) </script> <style lang="scss" scoped> .tips { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .line { white-space: pre; } </style> <style lang="scss"> .popper-class { max-width: 900px; } </style>

原生ajax请求和promise ajax请求实现 原生ajax实现const url = "/user/login"; let xhr = new XMLHttpRequest(); // 创建 Http 请求 xhr.open("GET", url, true); // 设置状态监听函数 xhr.onreadystatechange = function() { if (this.readyState !== 4) return; // 当请求成功时 if (this.status === 200) { handle(this.response); } else { console.error(this.statusText); } }; // 设置请求失败时的监听函数 xhr.onerror = function() { console.error(this.statusText); }; // 设置请求头信息 xhr.responseType = "json"; xhr.setRequestHeader("Accept", "application/json"); // 发送 Http 请求 xhr.send(null);promise ajax实现 1、前端可以通过getData(url).then(res=>{console.log(res即为获取到的数据)}) 2、通过 async await方式const dataJson = async()=>{ let res = await getData(url) console.log(res);//res即为后台返回的数据 }// promise 封装实现： function getData(url) { // 创建一个 promise 对象 let promise = new Promise(function(resolve, reject) { let xhr = new XMLHttpRequest(); // 新建一个 http 请求 xhr.open("GET", url, true); // 设置状态的监听函数 xhr.onreadystatechange = function() { if (this.readyState !== 4) return; // 当请求成功或失败时，改变 promise 的状态 if (this.status === 200) { resolve(this.response); } else { reject(new Error(this.statusText)); } }; // 设置错误监听函数 xhr.onerror = function() { reject(new Error(this.statusText)); }; // 设置响应的数据类型 xhr.responseType = "json"; // 设置请求头信息 xhr.setRequestHeader("Accept", "application/json"); // 发送 http 请求 xhr.send(null); }); return promise; }

实现数组的push、filter、map方法 1、实现push方法let arr = []; Array.prototype.push = function() { for( let i = 0 ; i < arguments.length ; i++){ this[this.length] = arguments[i] ; } return this.length; }2、实现filter方法Array.prototype.filter = function(fn) { if (typeof fn !== "function") { throw Error('请传入一个函数'); } const res = []; for (let i = 0, len = this.length; i < len; i++) { fn(this[i]) && res.push(this[i]); } return res; }3、实现map方法Array.prototype.map = function(fn) { if (typeof fn !== "function") { throw Error('参数是函数'); } const res = []; for (let i = 0, len = this.length; i < len; i++) { res.push(fn(this[i])); } return res; }

mock使用说明 1.下载mock.js和axios//下载mock.js npm install mockjs -D //下载axios npm install axios2.在src下创建mock目录，并在mock目录下创建index.jsimport { mock } from 'mockjs'; let data = mock({ "data|100": [ //生成100条数据 数组 { "shopId|+1": 1,//生成商品id，自增1 "shopMsg": "@ctitle(10)", //生成商品信息，长度为10个汉字 "shopName": "@cname",//生成商品名 ， 都是中国人的名字 "shopTel": /^1(5|3|7|8)[0-9]{9}$/,//生成随机电话号 "shopAddress": "@county(true)", //随机生成地址 "shopStar|1-5": "★", //随机生成1-5个星星 "salesVolume|30-1000": 30, //随机生成商品价格 在30-1000之间 "shopLogo": "@Image('100x40','#c33', '#ffffff','小北鼻')", //生成随机图片，大小/背景色/字体颜色/文字信息 "food|7": [ //每个商品中再随机生成七个food { "foodName": "@cname", //food的名字 "foodPic": "@Image('100x40','#c33', '#ffffff','小可爱')",//生成随机图片，大小/背景色/字体颜色/文字信息 "foodPrice|1-100": 20,//生成1-100的随机数 "aname|14": [ { "aname": "@cname", "aprice|30-60": 20 } ] } ] } ] }); mock(/goods\/goodAll/, 'post', () => { //三个参数。第一个路径，第二个请求方式post/get，第三个回调，返回值 return data })3.在main中引入mockimport { createApp } from 'vue' import './style.css' import App from './App.vue' import './mock/index.js' ##引入mock,让他全局可用 createApp(App).mount('#app')4.在App.vue中使用axios请求mock<template> <div> <button @click="getMessage">获取数据</button> <table border="1" cellspacing='0'> <thead> <tr> <th>销售ID</th> <th>销售描述</th> <th>销售名称</th> <th>电话</th> <th>销售星级</th> <th>卖出数量</th> <th>住址</th> </tr> </thead> <tbody> <tr v-for="item in arr[0]" :key="item.shopId"> <td>{{item.shopId}}</td> <td>{{item.shopMsg}}</td> <td>{{item.shopName}}</td> <td>{{item.shopTel}}</td> <td>{{item.shopStar}}</td> <td>{{item.salesVolume}}</td> <td>{{item.shopAddress}}</td> </tr> </tbody> </table> </div> </template> <script setup> import axios from 'axios' import { reactive } from 'vue'; //赋值给变量 let arr = reactive([]); //获取数据 const getMessage = ()=>{ axios.post("http://localhost:8080/goods/goodAll").then((res)=>{ console.log(res); arr.push(res.data.data); }); } </script> <style scoped> </style> {lamp/}

js数组的判别方法 一、Array.isArray判断 用法：Array.isArray(arr)ES5中新增了Array.isArray方法,IE8及以下不支持Array.isArray() 用于确定传递的值是否是一个[Array], 返回布尔值 true；否则它返回 false。let arr = []; console.log(Array.isArray(arr)); // true // 下面的函数调用都返回 true Array.isArray([]); Array.isArray([1]); Array.isArray(new Array()); Array.isArray(new Array('a', 'b', 'c', 'd')) // 鲜为人知的事实：其实 Array.prototype 也是一个数组。 Array.isArray(Array.prototype); {dotted startColor="#ff6c6c" endColor="#1989fa"/}二、constructor判断 用法：arr.constructor === ArrayObject的每个实例都有构造函数 constructor，用于保存着用于创建当前对象的函数let arr = []; console.log(arr.constructor === Array); // true{dotted startColor="#ff6c6c" endColor="#1989fa"/}三、instanceof 判断 用法：arr instanceof Arrayinstanceof 主要是用来判断某个实例是否属于某个对象let arr = []; console.log(arr instanceof Array); // true{dotted startColor="#ff6c6c" endColor="#1989fa"/}四、原型链上的isPrototypeOf判断 用法：Array.prototype.isPrototypeOf(arr)Array.prototype 属性表示 Array 构造函数的原型isPrototypeOf()可以用于测试一个对象是否存在于另一个对象的原型链上。let arr = []; console.log(Array.prototype.isPrototypeOf(arr)); // true{dotted startColor="#ff6c6c" endColor="#1989fa"/}五、Object.prototype.toString 用法：Object.prototype.toString.call(arr) === '[object Array]'Array继承自Object，JavaScript在Array.prototype上重写了toString，toString.call(arr)实际上是通过原型链调用了。let arr = []; console.log(Object.prototype.toString.call(arr) === '[object Array]'); // true{dotted startColor="#ff6c6c" endColor="#1989fa"/}六、Array 原型链上的 isPrototypeOf 用法：Array.prototype.isPrototypeOf(arr)Array.prototype 属性表示 Array 构造函数的原型let arr = []; console.log(Array.prototype.isPrototypeOf(arr)); // true{dotted startColor="#ff6c6c" endColor="#1989fa"/}顺便复习一下typeof的用法： 对于引用类型，不能用typeof来判断，因为返回的都是object// 基本类型 typeof 123; //number typeof "abc"; //string typeof true; //boolean typeof undefined; //undefined typeof null; //object var s = Symbol; typeof s; //symbol // 引用类型 typeof [1,2,3]; //object typeof {}; //object typeof function(){}; //function typeof Array; //function Array类型的构造函数 typeof Object; //function Object类型的构造函数 typeof Symbol; //function Symbol类型的构造函数 typeof Number; //function Number类型的构造函数 typeof String; //function String类型的构造函数 typeof Boolean; //function Boolean类型的构造函数