49 lines
1.1 KiB
Markdown
49 lines
1.1 KiB
Markdown
|
# 自定义组件开发规范
|
||
|
|
|
||
|
|
## 需要全完自定义组件的内容
|
||
|
|
|
||
|
|
````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
|
||
|
|
````
|