vue3、element plus开发小技巧总结

1、多使用watch、computed来代替组件事件监听，可以减少代码量。但要注意Ref响应数据和Reactive响应对象的监听有区别。reactive对象配合deep：true能解决大部分问题。

例如你需要根据两个input框的输入内容改变，及时更新第三个input框的内容，可以这么写

//监视出车、收车里程，自动计算营运里程
watch(
    [() => editForm.value.startMileage, () => editForm.value.endMileage],        监控数组
    ([startMileage, endMileage]) => {                            
        editForm.value.runMileage = endMileage - startMileage;
    }
)

如果根据某个选择器的改变，及时更新其他响应数据的值，可以这么写

//监视editForm.bus数据变化后，自动设置其他字段
watch(
    () => editForm.value.bus,
    (newBus) => {
        if (newBus === null) return;
        editForm.value.driver = editForm.value.bus?.driver;
        editForm.value.department = editForm.value.bus?.department;
        editForm.value.route = editForm.value.bus?.route;
        editForm.value.way = editForm.value.bus?.route?.line;
        console.log(editForm.value, "bus已改变");
        axios.get(`${urlEndMileage}/${editForm.value.bus?.id}`).then((response) => {
            editForm.value.startMileage = response.data;
        }).catch(err => {
            httpErrBox(err, "获取最后一次出车里程出错！");
        })
    },
    { deep: true }        //开启深度监控，被监控对象的属性发生变化也会引发
)

2、el-dialog修改表格数据时能在表格中及时体现出来，但修改后不保存会保留错误数据，解决方法分两步：

①在el-dialog加上ref属性和destroy-on-close属性，使之在关闭时销毁

②配合在el-dialog关闭时，调用formRef.value?.resetFields();来恢复其实数据。其中formRef是ref属性定义的，其变量为const formRef = ref<FormInstance>();

为什么要在关闭时销毁对话框？formRef.value?.resetFields()该方法是恢复至对话框创建时的数据，如果不销毁对话框，那么这个数据一直是对话框被第一次调用时的数据，例如第一次时修改表格中某行数据，那么这一行数据就会一直作为原始数据存在，无论你以后时新增还是修改其他行。如果关闭时销毁，则每次打开对话框时都是新建立的，那么原始数据就是你打开对话框时的数据。

3、关于丢失响应的一些情况。响应式分两种，一种是ref，一种是reactive。

ref变量：修改时要给 .value赋值

reactive变量：修改时不能给变量赋值，你只能修改变量的成员属性

4、在<script setup lang="ts">中想要用到router

import { useRouter } from 'vue-router';

const router = useRouter();

然后就可以使用router.……

5、对话框校验

//需校验的form，注意ref属性
<el-form :model="editForm" :rules="rules" ref="formRef">

//保存按钮
<el-button type="primary" @click="handleSave(formRef)">保存</el-button>


//引入所需组件
import { type FormRules, type FormInstance } from 'element-plus';

//定义ref属性指向的变量，并指定校验规则rules
const formRef = ref<FormInstance>();
const rules = reactive<FormRules<User>>({
    id: [{ required: true, message: `${viewName}ID必须输入`, trigger: 'blur' }],
    name: [{ required: true, message: `${viewName}名称必须输入`, trigger: 'blur' }]
})

/**
 * 对话框“保存”按钮事件：带数据校验功能
 */
const handleSave = async (formEl: FormInstance | undefined) => {
    //校验
    if (!await validForm(formEl)) {
        console.log("校验未通过！");
        return;
    }
    console.log(isEdit.value);
    
    //访问网络保存
    axios.post(urlSave, editForm)
        .then(response => {
            if (!isEdit.value) {
                tableData.records.push(response.data);
            }
            editFormVisible.value = false;
        }).catch(err => {
            httpErrBox(err, `保存${viewName}出错！`);
        })
}