element plus 使用细节 (二)

接上一篇文章：

element plus 使用细节

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

文章目录

- [table fixed 的 v-bind 写法](#table fixed 的 v-bind 写法)
- change事件里面不要访问v-model的数据
- - 答案
- el-description
- [ElMessageBox.prompt 如何输入多个值](#ElMessageBox.prompt 如何输入多个值)

table fixed 的 v-bind 写法

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

js 复制代码

// 设置是否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：

子组件：

html 复制代码

<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>

父组件：

html 复制代码

<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：

html 复制代码

<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组件的内容

html 复制代码

<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写法：

js 复制代码

<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">
          <ElInput
            v-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>