接上一篇文章：

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>