Vue笔记

Vue笔记
代码格式化
shift+option+f

1、多语言使用

{{ $t(“fireReceiveAddress”) }}

const jjjj = t(‘isRequired’);

2、监听多个属性
watch(
selectValue2, (newVal, oldVal) => {
console.log(‘—’,newVal, oldVal)
}
)
watch(
selectValue1, (newVal, oldVal) => {
console.log(‘—’,newVal, oldVal)
}
)
注意：如果想监听下面这个 let selectData: any = ref({});
那么对selectData赋值时必须要通过selectData.value来赋值，否则监听不到
watch(
selectData, (newVal, oldVal) => {
console.log(‘XXXXX’,newVal, oldVal)
}
)

3、主动调用子组件的方法

组件暴漏一个方法
const play = () => {
}
defineExpose({ play })

4、如何使用el-form
el-form表单验证注意点

第一步、导入声明formRef
import type { FormInstance } from ‘element-plus’
声明 const formRef = ref()

第二步、最外层的el-form

添加标识ref ref=“formRef” 后面使用
绑定对应总的数据formData 比如 :model=“formData”

第三步、添加校验规则

1、el-form-item 绑定对应的属性 prop=“age”
2、添加校验规则
:rules=“[
{ required: true, message: ‘age is required’ },
{ type: ‘number’, message: ‘age must be a number’ },
]”>
3、输入框绑定对应属性，注意使用v-model.number、v-model.string否则无法校验

第四步、提交时的校验
<el-button type=“primary” @click=“submitForm(formRef)”>保存

const submitForm = (formEl: FormInstance | undefined) => {
//提交 校验
if (!formEl) return
formEl.validate((valid) => {
if (valid) {
console.log(‘submit!’)
} else {
console.log(‘error submit!’)
return false
}
})
}

5、删除一个字典的属性
let lastData = {
panel: ‘’,
startLoop: ‘’
};
delete lastData.startLoop;

6、

7、数组遍历
const fruits = [“Apple”, “Mango”, “Cherry”];
fruits.forEach((item, index, array) => {
console.log(item, index);
});
8、浅拷贝
///浅拷贝，这样修改newSelectData不会改变selectData
newSelectData.value = {…selectData};
数组浅拷贝
newArr = […oldArr];
9、字符串中间拼接变量
sss${变量名称}
10、flex布局占满剩余空间
设置子元素 flex:1;
11、el-tree改变选中的颜色
<el-tree
ref=“treeRef”
:data=“dataUnit”
default-expand-all
:props=“defaultProps”
@node-click=“handleNodeClickUnit”
:filter-node-method=“filterNode”
>
<template #default=“{ node, data }”>
{{ （${data.descr}） }}
{{ （${data.descr}） }}


12、echarts 使用
第一步：导入 npm install vue-echarts，方便使用
具体代码：

13、el-tree中间嵌入el-table


14、判断内容是否存在
export function IsEmptyValue(value: any) {
//必须是 value === 0， value == 0在value为""时会判断为true
if (value || value === 0) {
return true
}
return false
}