如果要實現鼠標移到表頭有注釋或者彈框該怎么添加呢？
<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;
隱藏起來的內容在鼠標懸浮時有飄窗，暫時沒有更好的辦法，采取的辦法是檢測表頭內容的長度，不過這種方式并不能標準的判斷哪一個表頭需要飄窗。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
