实用指南：element plus 使用细节 (二)

接上一篇文章：

1. element plus 使用细节

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

文章目录

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

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