首页 > 其他分享 >vue3 elementplus 表格表头过长 三个点显示

vue3 elementplus 表格表头过长 三个点显示

时间:2023-12-26 17:56:17浏览次数:47  
标签:elementplus span column tooltip label 表头 vue3 data

vue3:
const renderHeaderMethods = ({ column }) => { return createVNode( resolveComponent('el-tooltip'), { effect: 'dark', content: column.label, placement: 'top' }, { default: createVNode( 'span', { class: 'fa fa-exclamation-circle icon my-tooltip' }, column.label.length > 7 ? column.label.substr(0, 7) + '...' : column.label ) } ); };
         <el-table-column
                    label="透平发电机组IGV维保测试/3个月"
                    prop="alternatoIgvMaintain"
                    header-align="center"
                    align="center"
                    width="150px"
                    :show-overflow-tooltip="true"
                    :render-header="renderHeaderMethods"
                />
vue2:
renderHeader(h, data) {
      return h("span", [
        h(
          "el-tooltip",
          {
            attrs: {
              class: "item",
              effect: "dark",
              content: data.column.label,
              placement: "top",
            },
          },
          [h("span", data.column.label)]
        ),
      ]);
    },

 

标签:elementplus,span,column,tooltip,label,表头,vue3,data
From: https://www.cnblogs.com/zhangxingxia/p/17928965.html

相关文章

  • vue3学习之Pinia状态管理
    状态管理 src/views/Pinia.vue<scriptsetup>import{ref}from"vue";import{storeToRefs}from"pinia";import{useCounterStore}from"../stores/counter";import{useTodos}from"../stores/todos";//可......
  • vue3学习之逻辑复用
    逻辑复用-组合式函数 src/views/ad/User.vue<scriptsetup>import{useMouse}from"../../js/mouse.js";import{useFetch}from"../../js/fetch.js";import{ref,computed}from"vue";//组合式函数const{x,y}=useMouse();/......
  • vue3学习基础之组件
    组件Comp.vue<scriptsetup>import{ref,provide,readonly,defineAsyncComponent}from"vue";importDemoCompfrom"../../components/simple/DemoComp.vue";importErrorComponentfrom"../../components/simple/ErrorComp.vue&......
  • vue3学习基础之响应式状态
    响应式状态<scriptsetup>import{ref,reactive,computed,watch,watchEffect}from"vue";//reactive响应式对象只能用于对象、数组和集合类型constauthor=reactive({name:"JohnDoe",books:["Vue2-AdvancedGuide","Vue3-......
  • vue3学习基础之事件绑定
    事件绑定<scriptsetup>import{nextTick,ref}from"vue";functionclickA(){console.log("点击了a标签,点击事件传递到了外层p标签");}functionclickStop(){console.log("点击了a标签,点击事件停止向外层传递");}functionclickOnce(){console.log......
  • vue3学习基础之表单相关
    表单相关<scriptsetup>import{ref}from"vue";constmessage=ref("hello");constchecked=ref();constcheckedNames=ref([]);constpicked=ref();constselected=ref();constmulSelected=ref([]);constnum=ref(5);......
  • vue3学习基础之vue-router
    我的vue3学习之路总是学学停停,最开始在18年开发微信小程序,就发现小程序和vue的语法有些相似,然后就去看了vue2的文档,随后忙其它的事情就丢下了。直到22年又开始捡起来vue3,有了组合式api,语法简明很多,然后又不知道忙什么丢下。。。前段有些空时间,就把vue3的学习整理下,使用vite构建......
  • 【源码系列#04】Vue3侦听器原理(Watch)
    专栏分享:vue2源码专栏,vue3源码专栏,vuerouter源码专栏,玩具项目专栏,硬核......
  • VUE3 + Three.js 坑
    VUE3+Three.js坑1.问题描述将scene、camera、renderer、controls等变量用reactive变成响应式时,页面渲染会报错:three.module.js?5a89:24471UncaughtTypeError:'get'onproxy:property'modelViewMatrix'isaread-onlyandnon-configurabledatapropertyonthe......
  • fortawesome在vue3中的使用
    fortawesome的使用,2023-12-25https://fontawesome.com/search?o=r&m=free&c=coding&s=solid6.5.1,3.0.5,6.5.1yarnadd@fortawesome/fontawesome-svg-coreyarnadd@fortawesome/vue-fontawesomeyarnadd@fortawesome/free-solid-svg-icons/*SetupusingVu......