自定义表单控件

CURD 组件支持自定义表单控件,可以扩展内置控件或创建全新的控件。

基础用法

<script setup lang="ts">
// 自定义控件组件
const MyInput = defineComponent({
  props: {
    value: String,
  },
  emits: ['update:value'],
  setup(props, { emit }) {
    return () => (
      <input
        value={props.value}
        onInput={e => emit('update:value', e.target.value)}
      />
    )
  }
})

// 在列配置中使用
const columns = [
  {
    title: '自定义输入',
    dataIndex: 'custom',
    edit: {
      type: MyInput,
      customComponent: {
        // 传递给自定义组件的 props
        placeholder: '请输入'
      }
    }
  }
]
</script>

扩展内置控件

可以基于内置控件进行扩展:

<script setup lang="ts">
import { StdInput } from '@uozi-admin/curd'

// 扩展 Input 组件
const MyInput = defineComponent({
  extends: StdInput,
  setup(props, ctx) {
    // 添加自定义逻辑
    onMounted(() => {
      console.log('mounted')
    })

    return () => (
      <StdInput
        {...props}
        {...ctx.attrs}
        v-slots={ctx.slots}
      />
    )
  }
})
</script>