disabled状态el-form下el-button的disabled的精细化控制

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

查看时当然不希望编辑，最好是区分模式，在编辑模式下直接用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的一些功能封印，比如插槽，其实可以把插槽也拿过来，只是我这里不需要就没弄。

其实推而广之的话，也可以创建一个组件复写form.disabled，代码类似上面，

<template>
  <slot></slot>
</template>

<script setup lang="ts">
import { formContextKey } from 'element-plus';

interface IEnableFormItemProps {
  enable: boolean;
}

const props = withDefaults(defineProps<IEnableFormItemProps>(), {
  enable: true,
});

const form = inject(formContextKey, undefined);

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

provide(formContextKey, newForm);

watch(() => props.enable, () => {
  if (newForm) {
    newForm.disabled = props.enable ? false : form?.disabled;
  }
});
</script>

用法很简单

...
<EnableFormItem enable>
	<el-button>xxx</el-button>
</EnableFormItem>
...

此时el-button的disabled不再受el-form的影响而是被EnableFormItem的enable影响。我曾尝试过用函数式组件来写，代码如下

import { inject, provide, reactive, watch } from 'vue';
import { formContextKey } from 'element-plus';
export default function EnableFormItem(props, { slots }) {

  const form = inject(formContextKey, undefined);

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

  provide(formContextKey, newForm);

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

  return slots.default()
}

可惜不起作用，网上查了才知道在函数式组件中不能用provide/inject，这个真是我的知识盲区，有机会需要进一步研究一下。

如果对你有帮助请点赞，嘻嘻:)
原文