封装descriptions组件，描述，灵活

效果

1、组件1，dade-descriptions.vue

<template><table><tbody><slot></slot></tbody>  </table>
</template><script>
</script><style scoped>table {width: 100%;border-collapse: collapse;table-layout: fixed; /* 设置表格布局为固定 */}
</style>

2、组件2，dade-descriptions-item.vue

<template><th :style="'width:'+width+'px'">{{label}}</th><td :colspan="colspan"><slot></slot></td>
</template><script setup>import { defineProps } from 'vue';// 定义 propsconst props = defineProps({label: {type: String,default: ''},colspan:{type: String,default: '1' },width:{type: String,default: '100' }});
</script><style scoped>th,td {border: 1px solid rgba(239, 239, 245, 1);padding: 0px 4px 0px 0px;}th {/* width: 100px; */text-align: left;background-color:rgba(250, 250, 252, 1);padding: 4px 8px;}
</style>

3、组件3，dade-input

<template><input class="dade-input" style="width: 100%;" :type="type" :placeholder="placeholder" :disabled="disabled"/>
</template><script setup>import { defineProps } from 'vue';// 定义 propsconst props = defineProps({placeholder: {type: String,default: ''},type:{type: String,default: 'text' },disabled:{type: Boolean,default: false }});
</script><style scoped>.dade-input{border: none;outline: none;padding: 4px 8px;border: 1px solid transparent;margin: 2px;}.dade-input:hover {border: 0.5px solid #1ab362c7;margin: 2px;-webkit-box-shadow: 0 0.1px 0px 0 #1ab362c7;box-shadow: 0 0.1px 1.5px 0 #1ab362c7;}.dade-input:focus {border: 0.5px solid #1ab362c7;margin: 2px;-webkit-box-shadow: 0 0.1px 0px 0 #1ab362c7;box-shadow: 0 0.1px 3px 0 #1ab362c7;}
</style>

4、全局注册

import './assets/main.css'
import naive from 'naive-ui'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import dadeInput from './common/dade-input.vue'
import dadeDescriptions from './common/descriptions/dade-descriptions.vue'
import dadeDescriptionsItem from './common/descriptions/dade-descriptions-item.vue'const app = createApp(App)
app.use(naive)
app.use(router)
// 使用 app.component() 注册全局组件
app.component('dade-input', dadeInput)
app.component('dade-descriptions', dadeDescriptions)
app.component('dade-descriptions-item', dadeDescriptionsItem)app.mount('#app')

5、使用

<template><div><div style="margin-top:10px;width: 100%;"><dade-descriptions><tr><dade-descriptions-item label="大得001" width="100"><dade-input placeholder="大得" disabled="true"></dade-input></dade-descriptions-item><dade-descriptions-item label="大得001" width="100"><div style="padding: 4px 8px;">22</div></dade-descriptions-item><dade-descriptions-item label="大得001" width="150"><div style="padding: 4px 8px;">22</div></dade-descriptions-item><dade-descriptions-item label="大得001"><div style="padding: 4px 8px;">22</div></dade-descriptions-item></tr><tr><dade-descriptions-item label="大得001"><dade-input placeholder="大得"></dade-input></dade-descriptions-item><dade-descriptions-item label="大得001" colspan="5"><dade-input placeholder="大得"></dade-input></dade-descriptions-item></tr><tr><dade-descriptions-item label="大得001" colspan="7"><dade-input placeholder="大得"></dade-input></dade-descriptions-item></tr></dade-descriptions></div></div>
</template><script setup>
</script><style scoped></style>