当前位置: 首页 > Web前端 > JavaScript

vue3.0+antd实现表格内容超出自动tooltip

时间:2023-03-27 14:49:17 JavaScript

工具提示实现

{{contentText}}
Table封装和tooltip使用主要依赖tooltip函数实现{{文本}}import{defineComponent,computed}from"vue";importeleTooltipfrom"@/components/tooltip/index.vue";exportdefaultdefineComponent({名称:“commonTable”,组件:{eleTooltip,},道具:{keyId:{类型:字符串,默认值:“”,},显示QuickJumper:{类型:布尔值,默认值:true,},showLessItems:{类型:布尔值,默认值:false,},showSizeChanger:{类型:布尔值,默认值:true,},总计:{类型:数字,默认值:0,},paginationSize:{type:String,default:"",},defaultPageSize:{type:Number,default:10,},pageSize:{type:Number,default:10,},current:{type:Number,默认:1,},},setup(props,context){constattrs:any=context.attrs;constslot=context.slots;constcolumnsCustom=computed(()=>{return(attrs.columns&&attrs.columns.filter((item:any)=>{returnitem.slot;}).map((item:any)=>item.slot));});//重新定义正义表格页面constpagination=computed(()=>{return{size:props.paginationSize,hideOnSinglePage:false,pageSize:props.pageSize,当前:props.current,defaultPageSize:props.defaultPageSize,showQuickJumper:props.showQuickJumper,showLessItems:props.showLessItems,showSizeChanger:props.showSizeChanger,pageSizeOptions:[“10”,“20”,"50","100"],total:props.total,showTotal:(total:number)=>{return`共${total}条`;},};});constrowkeyIndex=(row:any)=>{returnrow.id||行[props.keyId];};return{slot,rowkeyIndex,columnsCustom,pagination,};},});