<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        VUE2.0+ElementUI2.0表格el-table實現表頭擴展el-tooltip

        來源:懂視網 責編:小采 時間:2020-11-27 22:03:15
        文檔

        VUE2.0+ElementUI2.0表格el-table實現表頭擴展el-tooltip

        VUE2.0+ElementUI2.0表格el-table實現表頭擴展el-tooltip:ElementUI2.0的表格的擴展: elementUI表格table elementUI文字提示Tooltip 如果要實現鼠標移到表頭有注釋或者彈框該怎么添加呢? <el-table empty-text=正在加載中... :data=contentList style=width: 100
        推薦度:
        導讀VUE2.0+ElementUI2.0表格el-table實現表頭擴展el-tooltip:ElementUI2.0的表格的擴展: elementUI表格table elementUI文字提示Tooltip 如果要實現鼠標移到表頭有注釋或者彈框該怎么添加呢? <el-table empty-text=正在加載中... :data=contentList style=width: 100

        ElementUI2.0的表格的擴展:

        elementUI表格table

        elementUI文字提示Tooltip

        如果要實現鼠標移到表頭有注釋或者彈框該怎么添加呢?

        <el-table
         empty-text="正在加載中..."
         :data="contentList"
         style="width: 100%"
         @sort-change="sort"
         class="pro-table-item"
         tooltip-effect="dark"
        >
         <template v-for="(item,index) in titleList">
            <el-table-column
            v-if="index == '0'"
            :prop="index.toString()"
            :label="item"
            sortable="custom"
            min-width="120"
            :render-header="renderHeader"
            > 
            </el-table-column>
         <el-table-column
         v-else
         :prop="index.toString()"
            :label="item"
            min-width="120"
            :render-header="renderHeader"
            show-overflow-tooltip
              </el-table-column>
           </template>
        </el-table>
        

        注: index == 0 時是一個排序功能的按鈕

        在使用:render-header之前,首先要 npm i babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx --s   安裝一個解析包,然后在babelrc里配置"plugins": ["transform-runtime", "transform-vue-jsx"]

        renderHeader(h, { column }) {
         if(column.label.length>13) {
         return (
         <el-tooltip
         class="item"
         effect="dark"
         content={column.label}
         placement="top"
         >
         <span>{column.label}</span>
         </el-tooltip>
         )
         } else {
         return (
         <span>{column.label}</span>
         )
         }
         },
        
        

        并不想讓所有的表頭都彈出tooltip,只想讓超出長度并且

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        隱藏起來的內容在鼠標懸浮時有飄窗,暫時沒有更好的辦法,采取的辦法是檢測表頭內容的長度,不過這種方式并不能標準的判斷哪一個表頭需要飄窗。

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        VUE2.0+ElementUI2.0表格el-table實現表頭擴展el-tooltip

        VUE2.0+ElementUI2.0表格el-table實現表頭擴展el-tooltip:ElementUI2.0的表格的擴展: elementUI表格table elementUI文字提示Tooltip 如果要實現鼠標移到表頭有注釋或者彈框該怎么添加呢? <el-table empty-text=正在加載中... :data=contentList style=width: 100
        推薦度:
        標簽: 表格 VUE 表頭
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 中文字幕看片在线a免费| a级片免费观看视频| 国产va免费精品观看精品| 亚洲视频2020| 午夜影院免费观看| 亚洲国产精品久久久久婷婷老年 | selaoban在线视频免费精品| 国产嫩草影院精品免费网址| 亚洲伊人久久大香线蕉综合图片| 亚洲国产夜色在线观看| 日本黄网站动漫视频免费| 亚洲香蕉久久一区二区| 在线免费观看毛片网站| 美女视频黄a视频全免费网站一区| 亚洲国产成人精品久久久国产成人一区二区三区综 | 亚洲AV中文无码字幕色三| 久久A级毛片免费观看| 亚洲国产精品乱码在线观看97| 午夜性色一区二区三区免费不卡视频| 国产亚洲精aa在线看| 久久大香伊焦在人线免费| 日韩亚洲Av人人夜夜澡人人爽| 日韩免费精品视频| 在线观看亚洲专区| 国产成人A亚洲精V品无码| 67pao强力打造高清免费| 亚洲乱码一区二区三区在线观看 | 毛片免费视频在线观看| 国产精品日本亚洲777| 亚洲人成中文字幕在线观看| 日日麻批免费40分钟无码| 中文有码亚洲制服av片| 不卡一卡二卡三亚洲| 国产精品久久免费| 免费一级毛片在线播放放视频| 亚洲αv在线精品糸列| 久久久久国产精品免费免费搜索| 日本精品久久久久久久久免费| 亚洲国产一区国产亚洲| 日本无卡码免费一区二区三区| 中国人免费观看高清在线观看二区|