任何事物都無法抗拒吞食一切的時間÷侥伲——泰戈爾
上一篇寫到用el-tree實現(xiàn)觸發(fā)部門管理的默認點擊事件绳匀，但是當(dāng)我們的部門名稱過長時候發(fā)現(xiàn)展示效果不盡人意台腥，查看文檔后只能自己間接來實現(xiàn)了投放，借助el-tooltip和el-tree的自定義內(nèi)容奈泪，以下是關(guān)于自定義內(nèi)容的兩種實現(xiàn)
可以通過兩種方法進行樹例程內(nèi)容的自定義：
render-content和范圍槽。使用render-content指定渲染函數(shù)灸芳，該函數(shù)返回需要的例程區(qū)域內(nèi)容即可涝桅。渲染函數(shù)的用法請參考Vue文檔。參數(shù)node狀語從句：data耗绿，分別表示當(dāng)前節(jié)點的節(jié)點對象和當(dāng)前節(jié)點的數(shù)據(jù)注意：由于的jsfiddle不支持JSX語法苹支，所以render-content砾隅。示例在的jsfiddle中無法運行但是在實際的項目中误阻，只要正確地配置了相關(guān)依賴，就可以正常運行晴埂。
這里使用范圍槽處理究反，二者邏輯類似，語法稍不同儒洛，廢話不多說精耐，直接上代碼一目了然
<div>
<el-tree
:data="deptTree"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
highlight-current
node-key="id"
ref="tree"
default-expand-all
@node-click="handleNodeClick">
<span class="custom-tree-node" slot-scope="{ node, data }">
<el-tooltip class="item" effect="dark" :content="node.label" placement="top-start">
<span > {{ node.label | ellipsis(8) }} </span>
</el-tooltip>
<div>
// 這里可以接著繼續(xù)寫內(nèi)容來渲染，比如操作按鈕編輯刪除等
</div>
</span>
</el-tree>
</div>
ellipsis是一個過濾器琅锻，因為考慮到簡單封裝下可以全局系統(tǒng)使用卦停，定義在vue目錄結(jié)構(gòu)filters中向胡，聲明如下
/**
* 省略多余字符，用...顯示
* @param {String} value
* @param {number} len
*/
export function ellipsis(value, len) {
if (!value) return ''
if (value.length > len) {
return value.slice(0, len) + '...'
}
return value
}
關(guān)于過濾器的使用詳見Vue Filters
在main.js中注冊全局
import * as filters from "./filters";
// register global utility filters
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key]);
});
附上最終效果圖
el-tree
