<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
        主站蜘蛛池模板: 一区二区三区亚洲| 亚洲国产精品成人精品无码区在线| 日本久久久免费高清| 亚洲国产综合自在线另类| 4399影视免费观看高清直播| 久久精品国产亚洲AV高清热| 国产激情免费视频在线观看| 亚洲AV无码久久寂寞少妇| 久久aa毛片免费播放嗯啊| 99人中文字幕亚洲区| 成人黄色免费网址| 精品亚洲AV无码一区二区| 女人18毛片水最多免费观看| 亚洲AV色无码乱码在线观看| 免费一级做a爰片久久毛片潮喷| 精品视频免费在线| 亚洲伊人久久精品影院| 全部免费毛片在线播放| 亚洲人成高清在线播放| 国产精品成人四虎免费视频| 黄色免费在线观看网址| 国产亚洲精品国产| 中文免费观看视频网站| 色天使亚洲综合一区二区| 亚洲一级Av无码毛片久久精品| a级毛片无码免费真人久久| 亚洲电影在线播放| 国产无遮挡裸体免费视频| 成人精品综合免费视频| 亚洲成年人在线观看| 成年女人毛片免费视频| 免费中文字幕视频| 久久久久亚洲AV片无码下载蜜桃| 在线免费视频一区二区| 深夜A级毛片视频免费| 亚洲成在人线av| 大陆一级毛片免费视频观看| 成人自慰女黄网站免费大全| 亚洲图片中文字幕| 免费a级毛片无码a∨性按摩| 无码国产精品一区二区免费vr|