接上一篇文章：

1. element plus 使用细节

最近菜鸟忙于系统开发，都没时间总结项目中使用的问题，幸好还是在空闲之余总结了一点（后续也会来补充），希望能给大家带来帮助！

table fixed 的 v-bind 写法

Element plus 的 table 列 fixed 的 v-bind 写法

// 设置是否fixed
const isFixed = computed(() => {return props.fixed ? { fixed: "right" } : {};
});<el-table-column v-bind="isFixed" label="子文库" width="120"><template #default="{ row }"><el-button link type="primary" size="small" @click="showSublib(row)">XXX</el-button></template>
</el-table-column>

change事件里面不要访问v-model的数据

Element Plus 中，change事件里面不要访问v-model的数据，eg：

子组件：

<script setup>  
const model = defineModel();  function handleChange(val) {  model.value = val;  console.log("model.value now is:", model.value);  
}  const options = [  {  value: 'Option1',  label: 'Option1',  },  {  value: 'Option2',  label: 'Option2',  disabled: true,  },  {  value: 'Option3',  label: 'Option3',  },  {  value: 'Option4',  label: 'Option4',  },  {  value: 'Option5',  label: 'Option5',  },  
]  
</script>  <template>  <el-select :model-value="model" @change="handleChange" placeholder="Select" style="width: 240px">  <el-option  v-for="item in options"  :key="item.value"  :label="item.label"  :value="item.value"  :disabled="item.disabled"  />  </el-select>  
</template>

父组件：

<script setup>  
import test from "./test.vue";
const value = ref("Option1");
</script>  <template>  <test v-model="value" />
</template>

大家可以猜猜看这里的运行结果是什么？请大家思考三秒！

答案

答案是还是旧的值，多切换几次就都是上一次的值！

el-description

el-descriptions 中的 el-descriptions-item 不能用组件的方式插入!

eg：

<el-descriptions class="base-info" style="height: fit-content" :column="3" border>// 这是不能显示的<SampleSublib /><p>样本储位</p><el-descriptions-item label="样本储位"><el-tag type="primary">{{ viewSampleInfoData.fridgeNum }}</el-tag></el-descriptions-item>
</el-descriptions>

sampleSublib组件的内容

<template><el-descriptions-item label="公司代码"><dict-tag:options="crm_contract_company_ownership_opts":value="viewSampleInfoData.sampleCompanyCode"/></el-descriptions-item><el-descriptions-item label="样本类型"><dict-tag :options="sample_type_code_opts" :value="viewSampleInfoData.sampleTypeCode" /></el-descriptions-item><el-descriptions-item label="一级类型"><dict-tag:options="sample_one_level_type_code_opts":value="viewSampleInfoData.sampleOneLevelTypeCode"/></el-descriptions-item><el-descriptions-item label="二级类型"><dict-tag:options="sample_two_level_type_code_opts":value="viewSampleInfoData.sampleTwoLevelTypeCode"/></el-descriptions-item><el-descriptions-item label="二级亚型"><dict-tag:options="sample_two_level_subtype_code_opts":value="viewSampleInfoData.sampleTwoLevelSubtypeCode"/></el-descriptions-item><el-descriptions-item label="三级类型"><dict-tag:options="sample_three_level_type_code_opts":value="viewSampleInfoData.sampleThreeLevelTypeCode"/></el-descriptions-item>
</template>

如果不封装成组件，直接放外面就是会正确显示的！

ElMessageBox.prompt 如何输入多个值

jsx写法：

<template><el-button plain @click="open">多输入框示例</el-button>
</template><script setup>
// 表单数据提升到外部
const createInitForm = () => {return {remaining: "",unit: ""};
};
const formModel = ref(createInitForm());// 模板
const rules = ref({remaining: [{ required: true, message: "请输入剩余量", trigger: "blur" }],
});
const testFormContent = defineComponent({props: {placeholder: String,_formModel: Object,showUnit: Boolean},setup(props) {const unitOptions = ref(sample_count_unit);return () => (<ElForm model={props._formModel} rules={rules.value}><ElFormItem label={`${props.placeholder}`} prop="remaining"><ElInputv-model={props._formModel.remaining}placeholder={`请输入${props.placeholder}`}/></ElFormItem>{props.showUnit && (<ElFormItem label="单位" prop="unit"><ElSelect v-model={props._formModel.unit} placeholder="请选择单位">{unitOptions.value.map((option) => (<ElOption label={option.label} value={option.value} />))}</ElSelect></ElFormItem>)}</ElForm>);}
});const open = () => {ElMessageBox({title: "填写入库信息",message: h(testFormContent, {placeholder: titleArr[props.sampleType],_formModel: formModel.value,showUnit: showUnitFun.value}),showCancelButton: true,confirmButtonText: "确定",cancelButtonText: "取消",customClass: "myElMessageBox",beforeClose: (action, instance, done) => {if (action === "confirm") {ElMessage.success(`剩余量: ${formModel.value.remaining}，单位: ${formModel.value.unit}`);done();} else {done();}}});
};
</script>