cip-components/cip-form-input/basic/table-radio/index.jsx

/**
 * 特殊组件需要和table配合使用
 */
import { formInputProps } from '@cip/components/cip-form-input/form-input-props'
import { useFormInput } from '@cip/components/hooks/form-input'
import { ElRadio } from 'element-plus'
import { setFieldValue } from '@cip/utils/util'
import { computed } from 'vue'
import './index.less'
export default {
  name: 'TableRadio',
  props: { ...formInputProps },
  setup (props, context) {
    const { width, ...formInput } = useFormInput(props, context)
    const activeValue = computed(() => {
      return props.config.activeValue ?? true
    })
    const inactiveValue = computed(() => {
      return props.config.inactiveValue ?? false
    })
    const activeCurrentValue = () => {
      // 特殊操作，不建议其他组件使用
      props.tableData.forEach(v => {
        // 将当前table的其他数据设置为假值
        setFieldValue(v, props.fieldKey, inactiveValue.value)
      })
      formInput.emitModelValue(activeValue.value)
    }
    const click = (e) => {
      // TODO: 此处element存在bug radio触发2次click disabled 无法控制click事件
      if (props.modelValue !== activeValue.value && !props.config.disabled) {
        activeCurrentValue()
      }
    }
    return () => <ElRadio
      class={'cip-table-radio'}
      modelValue={props.modelValue}
      label={activeValue.value}
      disabled={props.config.disabled}
      onClick={(e) => click(e)}
      // onUpdate:modelValue={() => { changeModelValue() }}
    />
  }
}