树状列表多选删除判断去重 在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>`) }

JavaScript 常用方法 (更新中) 检测数据类型typeof检测 const String = '1, 2, 3' console.log(typeof(String)) // 实例结果返回为string类型instanceof检测 // instanceof检测返回值是 true或false const num = [1,2]; console.log(num instanceof Array)typeof和instanceof优缺点typeof 检测数据类型 优点：可以准确的判断简单数据类型（Number、String、Boolean、undefined、null）缺点：判断复杂数据类型比较模糊（Function、Object）instanceof 检测数据类型 优点：可以准确的判断复杂数据类型（Array、Object）缺点：不能准确的判断简单数据类型（Number、Boolean、String）

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实例上定义定时器，减少不必要的内存浪费而且设置和清除定时器的代码放在一块，可读性维护性更好