网站自定义链接怎么做的,flash下载网站,建设市场监督管理网站,太谷网站建设最近学习vue3.2并自己在写一个项目#xff0c;然后发现好几个页面都是列表页#xff0c;重复写table和column也是觉得累#xff0c;学习的项目列表页不算多#xff0c;要是公司项目就不一样了#xff0c;所以就想着自己封装一个table组件#xff0c;免去大量重复工作和co…最近学习vue3.2并自己在写一个项目然后发现好几个页面都是列表页重复写table和column也是觉得累学习的项目列表页不算多要是公司项目就不一样了所以就想着自己封装一个table组件免去大量重复工作和copy改改改。
本文也是仅仅封装了一个相对简单的table组件主要是table 分页要是不想要分页也是可以通过使用table组件穿参数控制是否展示分页。基于查询表单后续再安排
封装一个table组件并不难主要是搞懂插槽、作用域插槽的写法和用法下面先复习一下插槽再进行封装。
一、slot插槽
定义
Vue 实现了一套内容分发的 API将 元素作为承载分发内容的出口。
简单理解就是对子组件的扩展通过 插槽向子组件内部指定位置传递内容。
插槽是组件的一块HTML模板这块模板显示不显示怎样显示是由父组件来控制的而插槽在哪里显示就由子组件来进行控制。
分类
匿名插槽具名插槽作用域插槽
匿名插槽
它不用设置名称属性可以放置在组件的任意位置可以理解为父传入样式及内容子负责展示
!--index.vue--
Child ulli1/lili2/li/ulul slotli v-for(v,i) in arr :keyi{{v}}/li/ul
/Child!--child.vue--
!--匿名插槽--
templatedivslot/slot/div
/template具名插槽
插槽加了名称属性就变成了具名插槽。 在 v-slot 之后添加冒号 (:) 然后写出要传递内容的 slot 的名称v-slot:slotname;简写#slotname
!--index.vue--
Childtemplate #default !--指定了 default 的名称表示不需要为默认插槽指定名称--p我是main的内容/p /templatetemplate #headerh2艾梯哎教育/h2/templatetemplate #listh2列表展示/h2ulli v-for(v,i) in arr :keyi{{v}}/li/ul/template
/Child!--child.vue--
!--具名插槽--
slot/slot
slot nameheader/slot
slot namelist/slot作用域插槽
好理解的叫法带数据的插槽。
作用域插槽跟单个插槽和具名插槽的区别因为单个插槽和具名插槽不绑定数据所以父组件提供的模板一般要既包括样式又包括内容而作用域插槽,相当于父组件提供一套样式数据都是子组件的。
!--index.vue--
Child template #userobjh2老师{{ obj.user.username }}/h2 h2所授课程{{ obj.user.course }}/h2/template!--解构写法--template #user{user}h2老师{{ user.username }}/h2 h2所授课程{{ user.course }}/h2 /template!--解构别名--template #user{user:person}h2老师{{ person.username }}/h2 h2所授课程{{ person.course }}/h2 /template/Child!--child.vue--
templatedivslot nameuser :useruser/slot /div
/templatescript setup
import {ref,reactive} from vue
const user ref({id:1,username:张老师,course:vue});
/script二、封装table
理解了具名作用域插槽 之后相信大家脑海里已经有思路如何封装了。我这里的思路大概如下
接收tableData数据和columns列以及其他杂七杂八的配置项然后在el-table-column上循环columns列然后定义以列名为名称的插槽并将数据row传递出去并提供默认插槽内容当没特殊数据展示可不传父的内容直接使用 定义的默认内容如果 columns传入fommater则会根据传入的function进行转换数据。
具体实现如下
!--MyTable--
templatedivel-table :style{ width: 100% }refelTableRef:datatableData :heightheight :max-heightmaxHeight:stripestripe:row-keyrowKey:highlight-current-rowhighlightCurrentRowrow-clickhandleRowClickselection-changehandleSelectionChangeel-table-column v-foritem in columns :keyitem.prop:propitem.prop :labelitem.label:show-overflow-tooltipitem.showOverflowTooltip:widthitem.width:fixeditem.fixed:typeitem.type:sortableitem.sortable:selectableitem.selectableFn!-- type 对应列的类型。 如果设置了selection则显示多选框 --!-- 如果设置了 index 则显示该行的索引从 1 开始计算 --!-- 如果设置了 expand 则显示为一个可展开的按钮--!-- selection / index / expand --template #default{row, column, $index} v-ifitem.typeindex{{getIndex($index)}}/templatetemplate #default{row, column, $index} v-if!item.type!-- 具名作用域插槽 --slot :nameitem.prop:slotPropsrow:index$index!-- 默认内容,当父组件不传内容时默认显示该内容 --span v-ifitem.formatter{{ item.formatter(row[item.prop]) }}/spanspan v-else{{ row[item.prop] }}/span/slot/template/el-table-column/el-tablediv classpagination-wrapel-paginationv-ifhasPaginationv-model:current-pagecurrentPagev-model:page-sizepageSize:page-sizespageSizes:smallsmall:backgroundtrue:layoutlayout:totaltotalsize-changehandleSizeChangecurrent-changehandleCurrentChange//div/div
/templatescript setup
import {toRefs} from vue
const props defineProps({// 表格相关tableData: {type: Array,default: []},columns:{type: Array,default: []},height: {type: String,default: 500px},maxHeight: {type: String,default: 500px},stripe: {type: Boolean,default: true},rowKey: {type: String,default: id},highlightCurrentRow: {type: Boolean,default: true},// 分页相关hasPagination: {type:Boolean,default: true},total: {type: Number,default: 0},currentPage: {type: Number,default: 1},pageSize: {type:Number,default: 10},pageSizes: {type: Array,default: [10, 20, 50, 100, 200]},layout: {type: String,default: total, sizes, prev, pager, next, jumper},small: {type: String,default: small}
})let {tableData,columns,height,maxHeight,stripe,rowKey,highlightCurrentRow,hasPagination,total,currentPage,pageSize,pageSizes,layout,small
} toRefs(props)const emit defineEmits([rowClick,selectChange,changeTableData,update:currentPage,update:pageSize])
// 当某一行被点击时会触发该事件
const handleRowClick (row, column, event) {emit(rowClick, { row, column, event })
}
// 当选择项发生变化时会触发该事件
const handleSelectionChange (selection) {emit(selectChange, selection)
}// 每页条数变化的事件
const handleSizeChange (val) {emit(update:pageSize,val)emit(changeTableData, currentPage.value, val)
}
// 当前页码变化的事件
const handleCurrentChange (val) {emit(update:currentPage,val)emit(changeTableData, val, pageSize.value)
}const getIndex (index) {return index 1 (currentPage.value - 1) * pageSize.value
}/scriptstyle langscss scoped/style三、使用MyTable组件
因为check需要格式化内容并且用el-tag来进行展示内容所以此处向table组件传入了需要展示的内容此时向table的namecheck的插槽传入内容那么table组件的默认展示内容则失效。
同理由于每个taable组件的操作项也不一样所以此处向nameoperator的slot插入内容。
MyTable :tableDatatableData:columnscolumns:totaltotal:currentPagelistQuery.pageNo:pageSizelistQuery.pageSizechangeTableDatachangeTableDatatemplate #check{ slotProps }el-tag classml-2 :typeslotProps.check?success:danger{{ checkFilter(slotProps.check) }}/el-tag/templatetemplate #operator{slotProps}el-button typeprimary clicksetData(edit,slotProps)编辑/el-buttonel-button typedanger clickhandleDel(slotProps)删除/el-button/template
/MyTablescript setup
import { ref,onMounted } from vue
import MyTable from /components/table/index.vue
import useHooks from /hooksconst { checkFilter, dateFormate } useHooks()let listQuery ref({pageNo:1,pageSize: 10
})
const tableData ref([])
let total ref(0)/*** prop:数据项列名* label:列名展示名* fixed:固定列 true/right/left* width:列宽* show-overflow-tooltip* type:对应列的类型 selection / index / expand* sortable:true/false* selectable:Function* formatter:格式化内容 function(row, column, cellValue, index)
**/
let columns ref([{prop: number,label: 车牌自编号},{prop: numberplate,label: 车牌号},{prop: date,label: 出厂日期,formatter: dateFormate},{prop: check,label: 车辆状态},{prop: operator,label: 操作,fixed: right},
])onMounted(() {getCarList()
})const changeTableData (pageNum,pageSize) {listQuery.value.pageNo pageNumlistQuery.value.pageSize pageSizegetCarList()
}// 列表查询
async function getCarList() {const {data: {data}} await carList(listQuery.value)tableData.value data.listtotal.value data.rows
}/script效果如下 如果需要加上索引或者复选框需要在columns上添加上 {type: selection,label:,width: 50px},{type: index,label:序号,width: 60px},若是列项超长不需要tooltip则配置showOverflowTooltip为false默认是true {prop: number,label: 车牌自编号,showOverflowTooltip: true, width: 100px},到此一个talbe组件就封装完成如有不当的地方还请大家多多包含和赐教如大家有不一样的封装思想也多多留言交流互相学习互相进步。
