el-form表单项disabled控制

—

由

于 Element Plus

有一个很复杂的表单，支持编辑和查看两种模式。

查看时当然不希望编辑，最好是区分模式，在编辑模式下直接用div显示而不是用表单元素。这样工作量就有点大。那就考虑使用表单元素的disabled来让其不能编辑。如果每个表单元素都写这个玩意也是很费劲的，幸好el-form提供了在表单上直接指定disabled的方法。那么问题又来了，表单中的按钮又想可以点击把弹框弹出显示内容，弹框中不允许保存。但是在el-form中的表单项都会表单disabled影响，具体原因如下（来自use-form-common-props.ts)：

export const useFormDisabled = (fallback?: MaybeRef<boolean | undefined>) => {
  const disabled = useProp<boolean>('disabled')
  const form = inject(formContextKey, undefined)
  return computed(
    () => disabled.value || unref(fallback) || form?.disabled || false
  )
}

可以看到如果form.disabled是true，那么即使我们给表单项指定了disabled=false也无用了。真是伤脑筋呀！！

从上面的代码可以想到，如果我把el-button的form.disabled设置为false是不是就解决了呢？form是通过inject方式注入的，那么我的想法是创建一个MyButton把el-button封装起来，在MyButton里面把form拦截然后复写，如下：

<template>
  <el-button>
    <slot></slot>
  </el-button>
</template>

<script setup lang="ts">
// 为了在disabled的form中让按钮依然可用
import { formContextKey } from 'element-plus';

interface IMyButtonProps {
  alwaysEnable: boolean;
}

const props = withDefaults(defineProps<IMyButtonProps>(), {
  alwaysEnable: false,
});

const form = inject(formContextKey, undefined);

let newForm;
if (form) {
  const tmp = {
    ...form
  };
  if (props.alwaysEnable) {
    tmp.disabled = false;
  }
  newForm = reactive({
    ...tmp,
  });
}

provide(formContextKey, newForm);
watch(() => props.alwaysEnable, () => {
  if (newForm) {
    newForm.disabled = props.alwaysEnable ? false : form?.disabled;
  }
})

</script>

这里会把el-button的一些功能封印，比如插槽，其实可以把插槽也拿过来，只是我这里不需要就没弄。

评论

发表回复取消回复