总结一些vue3小知识2

1.el-tree-select和el-tree组件报错（有的下拉选项选择不了，一点击就报错，但是有的却能选择，不会报错）

原因:就如同v-for一样，需要添加key才不会出现渲染错误，而el-tree-select和el-tree组件需要添加node-key属性（每个树节点用来作为唯一标识的属性，整棵树应该是唯一的）

2.在弹出框中的输入框、单选按钮出现输入不了，但是在下一次打开时，输入框却显示上一次输入的值

原因:没有数据没有跟着响应，是ddSaleForm 变量没有用ref或者reactive的原因，以下是出现该问题的变量 const addSaleForm = {salesperson:"", userName:"", remarks:""}，所以添加ref就可解决该问题

3.表格编辑和保存按钮对立显示/隐藏

<el-table :data="salespersonTableData" border  height="55vh" scrollbar-always-on>
    <el-table-column fixed="left" type="index" width="80" label="序号" />
    <el-table-column fixed="left" label="操作" width="150">
      <template #default="{ row }">
          <el-button style="color: #ff3535" class="operate" text @click="deleteBtn(row)" >删除</el-button>
          <el-button style="color: #3592FF" class="operate" text @click="row.isEdit=true" v-if="!row.isEdit">编辑</el-button>
          <el-button style="color: #3592FF" class="operate" text @click="saveUpdata(row)" v-else>保存</el-button>
          <el-button style="color: #3592FF" class="operate" text @click="getSalepersonList(),getUserOptions()" v-if="row.isEdit">取消</el-button>
      </template>
    </el-table-column>
    <div>以下省略一万条代码</div>
</el-table>

说明：实现该功能的代码关键点在于给row添加一个显示/隐藏的标识(isEdit)；在保存的方法中同样通过给传参添加isEdit属性就可以隐藏保存按钮而显示编辑按钮；取消按钮是直接调用获取列表接口的方法就刷新列表就可以隐藏取消按钮而显示编辑按钮了

4.in的使用

在JavaScript中，in运算符用于检查一个对象是否拥有某个属性。它的语法是prop in object，其中prop是你想要检查的属性名（可以是字符串或者符号），object是你想要检查的对象。

如果object拥有名为prop的自身属性或者继承属性，那么表达式prop in object会返回 true。否则，它会返回 false。

let obj = { a: 1, b: 2 };
console.log('a' in obj); // 输出：true
console.log('c' in obj); // 输出：false

5.如何获取请求标头中响应标头的属性值（Content-Disposition和Content-Type）

Content-Type是可以直接获取，而Content-Disposition和其他属性需要后端先进行设置才能获取；

这里获取的时候需要小写

fn(data).then((res) => { // 后端接口
  console.log(res.headers['content-type'],res.headers['content-disposition']);
}

6.toRefs和toReactive的使用

toRefs:响应式对象转换为普通对象

const state = reactive({
    FormData:{
        name:"",
        age:""
    },
    tableData:[]
})

let { FormData,tableData} = toRefs(state); // 解构出来

// js使用：直接使用，不需要使用state.出来了，在标签上也一样
function shower(){
    console.log(state.FormData,state.tableData);
}
// html使用
<div>{{FormData}}</div>
<div>{{tableData}}</div>

toReactive:普通对象转换为响应式对象

import { toReactive } from 'vue'

const normalObj = { foo: 'bar' }
const reactiveObj = toReactive(normalObj)

reactiveObj.foo = 'baz' // Vue将能够检测到这个更改

7.使用'=='的特殊用法的理解

const arr1 = [1];
const arr2 = [1,2];
if(arr1==1){
console.log('进来了'); // 会输出 进来了
}
if(arr2==1){
console.log('进来了'); // 不会输出 进来了
}

说明：在JavaScript中，当你使用==（双等号）进行比较时，会发生类型转换。arr1是一个数组[1]，而你正在将它与数字1进行比较。在这种情况下，JavaScript会尝试将数组转换为数字。对于只包含一个元素的数组，它会被转换为该元素的值。因此，数组[1]被转换为字符串1。

8.判断一个对象是空对象

var obj = {};
if (Object.keys(obj).length === 0) {
    console.log('该对象为空');
} else {
    console.log('该对象不为空');
}

9.判断数组中的对象某个属性值与其他对象的属性值是否相同

在JavaScript中，你可以使用Array.prototype.every()方法来检查selectedData.value数组中的所有元素的name属性是否都相同。

let allSame = selectedData.value.every((item, index, array) => {
 return index === 0 || item.name === array[index - 1].name;
});
console.log(allSame); // 如果所有元素的name属性都相同，输出true；否则，输出false

在这个例子中，我们使用了every()方法来检查数组中的每个元素。对于每个元素，我们都检查了它的name属性是否和前一个元素的name属性相同。如果所有元素都满足这个条件，那么every()方法将返回true；否则，它将返回false。
注意：这个方法假设数组中至少有一个元素，并且每个元素都有一个名为name的属性。如果实际情况不同，你可能需要修改这段代码以适应你的需求。

10.如何保持输入框输入的文本格式

直接使用<pre> 标，签在 HTML 中被用来显示预格式化的文本。被包裹在 <pre> 标签中的文本通常会保留其原始的行距和空格。这对于显示代码或者其他需要保留原始格式的文本非常有用。

11.ElMessage弹框提示样式重叠修改

原因：使用循环时没有return或者使用了forEach循环，导致多个提示同时显示就重叠了

// 这个是重叠的写法
selectedData.value.forEach(item => {
    if (item.omsPayDto.payStatus == 0 ) {
        bool = false
        return ElMessage.error("存在应付数据未确认的计费项，请确认后重试")
    } else if(item.omsPayDto.payStatus == 2 ){
        bool = false
        ElMessage.error("存在应付数据服务商清单已生成的计费项！")
    }else if(item.omsPayDto.payStatus == 4){
        bool = false
        ElMessage.error("存在应付数据服务商已确认的计费项！")
    }else {
        ids.push(item.omsCostItemDto.id)
    }
})

解决方法：就是使用其他循环方法并且添加return

// 解决方法
for (const key in selectedData.value) {
    let item = selectedData.value[key];
    if (item.omsPayDto.payStatus == 0 ) {
        bool = false
        return ElMessage.error("存在应付数据未确认的计费项，请确认后重试")
    } else if(item.omsPayDto.payStatus == 2 ){
        bool = false
        return ElMessage.error("存在应付数据服务商清单已生成的计费项！")
    }else if(item.omsPayDto.payStatus == 4){
        bool = false
        return ElMessage.error("存在应付数据服务商已确认的计费项！")
    }else {
        ids.push(item.omsCostItemDto.id)
    }
}

12.快速去除小数点末尾的零

let num = 5.23000
let newNum = Number(num.toFixed(2).toString())
console.log('newNum',newNum); // 输出5.23

说明：就是toString()可以去除小数点末尾的零，但是会变成字符串，所以用Number()再转换成数字类型

13.快速判断一个对象中的所有属性值是否为空

let bool = Object.values(afterSale.value).every(item=>item===''||item.length===0)
if(bool){
  return ElMessage.error("请先填写再提交！")
}

14.价格千分制

// 价格千分制 9999千分制后9,999
export function formatPrice(price) {
    price = Number(price||0)
    // 将价格转换为字符串，并根据逗号将其分隔成整数部分和小数部分（如果有）
    let parts = price.toString().split('.');
    let intPart = parts[0];
    let decimalPart = parts.length > 1 ? '.' + parts[1] : '';

    // 使用正则表达式将整数部分每3位加一个逗号
    intPart = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');

    // 返回格式化后的价格
    return intPart + decimalPart;
}