做pc端网站什么开头,有什么免费建站网站,网页建设与制作,成都近期发生的大事• vue3 使用element-plus 如何再次封装table组件
• 基本步骤
• 创建子组件#xff1a;
• 默认数据配置
• 在需要使用自定义 Table 组件的地方引入并使用#xff1a; 创建子组件#xff1a; 创建一个新的 .vue 文件#xff0c;例如子组件 baseTable.vue#xff0c…• vue3 使用element-plus 如何再次封装table组件
• 基本步骤
• 创建子组件
• 默认数据配置
• 在需要使用自定义 Table 组件的地方引入并使用 创建子组件 创建一个新的 .vue 文件例如子组件 baseTable.vue作为你封装后的 Table 组件。 templatediv classbase-table-wrapperel-table :datatableData stylewidth: 100%template v-foritem in column :keyitem.propel-table-column :propitem.prop :labelitem.label :widthitem.widthtemplate #defaultscope v-if!!item.isScopeslot :nameitem.propScopeContent :rowscope.row //template /el-table-column/template/el-table/div
/templatescript setupconst props defineProps({column: {type: Array,default() {return []}},tableData: {type: Array,default() {return []}},
})/scriptstyle langscss scoped/style在需要使用自定义 Table 组件的地方引入并使用
template
base-table :columntableColumn :tableDatarecordList !-- 刷卡时间自定义内容 --template #createTimeScopeContentslotProps span{{ parseTime(slotProps.row.eventTime) }}/span/template !-- // 刷卡时间自定义内容 --!-- 事件自定义内容 --template #typeScopeContentslotProps dict-tag :optionsentrance_type :valueslotProps.row.event //template!-- // 事件自定义内容 -- !-- 部门自定义内容 --template #deptNameScopeContentslotProps span{{ slotProps.row.deptName || 无 }}/span /template!-- // 部门自定义内容 -- !-- 刷卡地点自定义内容 --template #controllerNameScopeContentslotProps dict-tag :optionscontroller_name :valueslotProps.row.controllerName //template!-- // 刷卡地点自定义内容 --
/base-table
/templatescript setup
const tableColumn ref([{label: 刷卡时间,prop: createTime,width: 180,align: center,isScope: true}, {label: 事件,prop: type,width: auto,align: center,isScope: true}, {label: 姓名,prop: staffName,width: auto,align: center}, {label: 卡号,prop: cardNo,width: auto,align: center}, {label: 部门,prop: deptName,width: auto,align: center,isScope: true}, {label: 刷卡地点,prop: controllerName,width: auto,align: center,isScope: true}
])
/script在 Vue 3 中你可能会遇到“具名插槽”Named Slots的概念它允许你在组件内部定义特定的插槽位置并在父组件中为这些具名插槽提供内容。
以下是如何在Vue 3中使用具名插槽的一个基本示例
首先在子组件ChildComponent.vue中定义一个具名插槽
templatedivh2这是子组件的标题/h2slot namedescription默认描述内容/slotslot namefooter默认页脚内容/slot/div
/template在这个例子中我们定义了两个具名插槽description 和 footer并且都提供了默认内容。
然后在父组件中使用这个子组件并填充具名插槽
templateChildComponenttemplate v-slot:descriptionp这是来自父组件的描述内容/p/templatetemplate v-slot:footerp这是来自父组件的页脚内容/p/template/ChildComponent
/template在父组件中我们使用 v-slot 指令也可以简写为 #来指定要填充哪个具名插槽并在其中提供相应的内容。这样当渲染子组件时就会在对应的位置插入这些内容。
vue3 使用具名插槽并且传递值
在 Vue 3 中具名插槽不仅可以用于传递 HTML 结构还可以配合作用域插槽Scoped Slots来传递数据。作用域插槽允许子组件向其插槽内传递数据而父组件则可以通过插槽提供的回调函数来访问这些数据并在插槽内进行渲染。
下面是一个使用 Vue 3 中具名插槽结合作用域插槽传递值的例子
子组件 (ChildComponent.vue):
templatedivh2这是子组件的数据列表/h2!-- 定义作用域插槽传入一个数组 --ulli v-foritem in items :keyitem.idslot :itemitem namelistItem/slot/li/ul/div
/templatescript
export default {data() {return {items: [{ id: 1, text: 第一条数据 },{ id: 2, text: 第二条数据 },// ...]}}
}
/script父组件:
templateChildComponent!-- 使用 v-slot 指令接收子组件传递的 item 数据 --template #listItemslotPropsdivpID: {{ slotProps.item.id }}/pp内容: {{ slotProps.item.text }}/p!-- 这里可以根据 item 数据自定义渲染内容 --/div/template/ChildComponent
/template在上述例子中子组件 ChildComponent 定义了一个具名插槽 listItem 并且每个插槽都绑定了一个 item 数据。
在父组件中我们通过 v-slot:listItem“slotProps” 来接收这些数据并通过 slotProps.item 访问具体的 item 对象属性。这样父组件就可以根据传递过来的数据自行决定如何渲染每一项列表内容了。
