树状列表多选删除判断去重 在elemenet中，下拉框选中数据后取消和选中都会产生一个数据，在进行多选删除如果遇到客户重复添加会出现重复ID，导致无法删除以下是以element的树状列表多选删除为例 <template> <el-tree :props="props" :load="loadNode" show-checkbox @check-change="handleCheckChange"> </el-tree> <button @click='handleRemoveAll'>批量删除</button> </template> <script> export default { data() { return { deletedData:[], // 选中的数据 } }, methods:{ handleCheckChange(data) { // data为选中的数据对象 const key = data.id // 选择唯一值为key const index = this.deletedData.indexOf(key) // deletedData为存储的数组 // 通过indexOf来判断 没有找到匹配的字符串则返回 -1。 if (index == -1) { // 添加进数组中 this.deletedData.push(key) } else { // 如果检测到重复，删除 this.deletedData.splice(index, 1) } }, handleRemoveAll(){ // ... 删除方法 } } } </script>

给ElementUI中的el-date-picker添加日期高亮显示 在写的项目中，关于会议座位安排查询项上，因为会议不止一场，所以要在选择时间的时候，有一个明确的显示标注在此时间段有会议。在组件中有一个cellClassName属性，设置日期的 className 是Function(Date)返回的数据是时间戳需要转换 以下是代码 <template> <el-date-picker v-model="date" type="date" placeholder="选择日期" size="small" :picker-options="pickerOptions"> </el-date-picker> </template> <script> export default { data() { return { date:'', datePicker: [], // 存储的日期时间 pickerOptions：{ cellClassName:(time) => { let timeDate = this.convertToDate(time.getTime()) for(var i = 0; i < this.datePicker.length; i++) { // datePicker是处理过后的数据格式为['2024/08/27','2024/08/28'] if (this.datePicker[i].includes(timeDate)) { console.log('datePicker', this.datePicker[i]); return 'dateArrClass' // 返回值设置的是我们添加的类名 } } } } }, methods:{ // 日期转换 convertToDate(isoString) { const date = new Date(isoString); const year = date.getFullYear(); const month = (date.getMonth() + 1).toString().padStart(2, '0'); const day = date.getDate().toString().padStart(2, '0'); // 返回数据根据后端返回的日期来也可以是'${year}-${month}-${day}' return `${year}/${month}/${day}`; }, handleActiveChange(value){ // 这里我是点击活动后显示会议，后端返回会议的时间 Api.getDate({ activity_id: value }).then(res => { if (res.data.list.length === 0) { this.date = '' } else { // 默认显示第一个日期 this.date = res.data.list[0].date // 循环拿到数据中的日期重新处理 for(var i = 0; i < res.data.list.length; i++) { this.datePicker.push(res.data.list[i].date) } } }) }, } } } </script> <style lang="less"> // 这里不加scoped是因为日期选择框是默认挂载到body上,所以在scoped的属性style下无法修改改样式，加一个不带scoped的style即可 .dateArrClass > div::after{ content: ''; position: absolute; right: 8px; top: 23px; width: 5px; height: 5px; border-radius: 50%; background-color: rgb(180, 13, 13) } </style>

el-table 全部表格数据合计 elemnt-ui中的el-table表格使用属性show-summary可以计算当前展示页所有数据的合计，项目要求计算全部的数据并展示在第一页，show-summary无法满足这一条件，如何做？// 我这里采用的是document.querySelector找到tbody通过insertAdjacentHTML插入数据 // 注意所有数据合计是通过后端计算返回到前端的 const total = document.getElementById('total') const tbody = document.querySelector('tbody') tbody.insertAdjacentHTML('beforeend', ` <tr id="total" class="el-table__row "> <td rowspan="1" colspan="1" class="el-table_1_column_1 is-center el-table__cell"> <div class="cell">合计</div> </td> <td rowspan="1" colspan="1" class="el-table_1_column_2_column_3 is-center el-table__cell"> <div class="cell">${合计一}</div> </td> </tr>`) }这样写无论分页数据如何切换他始终会插入到最后一行进行所有数据的计算// 添加一个判断 如果total存在则删除 避免切换一直添加 if (total) { total.remove() }这里如果想要添加带状态表格 // 可以找到this.tableData(所有表格数据) 进行判断是否添加el-table__row--striped属性 const clazz = (this.tableData.length + 1) % 2 === 0 ? 'el-table__row--striped' : '' <tr id="total" class="el-table__row ${clazz}"> <td rowspan="1" colspan="1" class="el-table_1_column_1 is-center el-table__cell"> <div class="cell">合计</div> </td> </tr> 完整代码 const total = document.getElementById('total') console.log(total) if (total) { total.remove() } if (this.tableData.length) { const clazz = (this.tableData.length + 1) % 2 === 0 ? 'el-table__row--striped' : '' console.log(this.tableData.length) const tbody = document.querySelector('tbody') tbody.insertAdjacentHTML('beforeend', ` <tr id="total" class="el-table__row ${clazz}"> <td rowspan="1" colspan="1" class="el-table_1_column_1 is-center el-table__cell"> <div class="cell">合计</div> </td> <td rowspan="1" colspan="1" class="el-table_1_column_2_column_3 is-center el-table__cell"> <div class="cell">${res.result.total}</div> </td> <td rowspan="1" colspan="1" class="el-table_1_column_2_column_4 is-center el-table__cell"> <div class="cell">${res.result.electricity}</div> </td> </tr>`) }

Vue定时器清除和设置 方法一：使用生命周期函数beforeDestory data() { return { timer: null } }, methods: { getList().then(res => { this.timer = setInterval(() => { console.log('1s打印') },1000) }) }, beforeDestory() { clearInterval(this.timer) this.timer = null }方法二：使用hook:beforeDestorycreated() { let timer = setInterval(() => { console.log('1s打印') },1000); this.$once('hook:beforeDestory', () => { clearInterval(this.timer) timer = null }) }使用hook的优势在于无需在vue实例上定义定时器，减少不必要的内存浪费而且设置和清除定时器的代码放在一块，可读性维护性更好

vue中的date为什么是一个函数 | 数据类型 | 深浅拷贝 我们在写vue的项目中定义的一些属性会放到date中,为什么他得是一个函数而不能是对象呢?export default { data() { return { } } } 当date是一个函数的时候,放进去的一些值他都会开辟一个新的空间进行存储.num1: 1, num1: 1, 更改一个值的时候其他的值不会发生任何变化当date是对象的时候,更改一个值其他的值都会发生更改vue中组件是用来复用的，为了防止data同一个组件被复用多次.数据类型基本数据类型: Number, String, Boolean, Null, Undefined.复杂数据类型: Date, Function, Object, Promise.浅拷贝深拷贝浅拷贝: 会创建一个新的对象,这个对象有着原对象属性值的精确拷贝,新旧对象还是共享同一块内存.深拷贝: 创建一个一模一样的对象,会开辟一个新的空间,不共享同一块内存,修改新对象不会影响到原对象.浅拷贝拷贝的是基础数据类型的时候,修改原对象不会影响到新对象.var a = 10; var b = a; b = 20; console.log(a); -> 结果为10 console.log(b); -> 结果为20 当拷贝的是基础数据类型的时候,因为基础数据类型是值传递，所以是直接将属性值赋值给新的对象。当拷贝的是复杂数据类型的时候,它只是把内存地址赋值给了成员变量,指向了同一内存空间.改变其中一个的值,会对另外一个的值产生影响.