# 自定义组件开发规范

## 需要全完自定义组件的内容

````vue
<script>
import { toRef, useAttrs } from 'vue';

defineOptions({
  inheritedAttrs: false // 禁用透传
});

// 透传的属性，比如 class、style、id等
// 透传的事件，比如 click、input、change等
// 自己跟据需要手动添加到dom上 v-bind="attrs"
const attrs = useAttrs();

// props 接受 渲染该组件的原始 json schema对象
const props = defineProps<WidgetProps<WidgetSchema>>();

// 获取schema ，自己跟据 业务 需要 从schema中获取数据
const schema = toRef(() => props.schema);

const tableProps = computed(() => {
  // 这里可以根据 schema 来计算出 table 的 props
  return {
    data: schema.value.data,
    columns: schema.value.columns,
  };
});
</script>

<template>
  <el-table v-bind="tableProps">
    <el-table-column
      v-for="column in tableProps.columns"
      :key="column.prop"
      :label="column.label"
      :prop="column.prop"
    >
      <template #default="{ row }">
        <span v-bind="attrs">{{ row[column.prop] }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>
```markdown
````