本文主要介紹怎么在el-tree組件中通過render函數(shù)來生成el-button。
創(chuàng)新互聯(lián)公司2013年開創(chuàng)至今,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項目成都做網(wǎng)站、成都網(wǎng)站制作網(wǎng)站策劃,項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元巴州做網(wǎng)站,已為上家服務(wù),為巴州各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220
這是element-ui中el-tree樹:
這是需要實現(xiàn)的效果:
tree.vue文件中,具體實現(xiàn)的代碼如下:
主要說下這段代碼:
renderContent:function(h,data){ return h('span',{},[ h('span',data.data.label+":"), h("span",{ class:'leftSpan', domProps:{ innerHTML:data.data.code } }), h("el-button",{ class:'floatSpan', props:{ type:'danger' } },'刪除') ]) }
文檔中有詳細(xì)的說明:https://cn.vuejs.org/v2/guide/render-function.html
h( //參數(shù)1:{String | Object | Function},一個HTML標(biāo)簽字符串,組件選項對象,或解析任何一種的一個async異步函數(shù),必需參數(shù)。 'el-button', //參數(shù)2:{Object} 一個包含模板相關(guān)屬性的數(shù)據(jù)對象,可以在template中使用這些特性,可選參數(shù) {}, //參數(shù)3: {String | Array},如果直接是字符串則會生成“文本虛擬節(jié)點(diǎn);如果是數(shù)組,則可以在數(shù)組中,則可以生成子虛擬節(jié)點(diǎn) '刪除' )
參數(shù)2中的對象在文檔中有詳細(xì)的介紹:
{ // 和`v-bind:class`一樣的 API // 接收一個字符串、對象或字符串和對象組成的數(shù)組 'class': { foo: true, bar: false }, // 和`v-bind:style`一樣的 API // 接收一個字符串、對象或?qū)ο蠼M成的數(shù)組 style: { color: 'red', fontSize: '14px' }, // 普通的 HTML 特性 attrs: { id: 'foo' }, // 組件 props props: { myProp: 'bar' }, // DOM 屬性 domProps: { innerHTML: 'baz' }, // 事件監(jiān)聽器基于 `on` // 所以不再支持如 `v-on:keyup.enter` 修飾器 // 需要手動匹配 keyCode。 on: { click: this.clickHandler }, // 僅用于組件,用于監(jiān)聽原生事件,而不是組件內(nèi)部使用 // `vm.$emit` 觸發(fā)的事件。 nativeOn: { click: this.nativeClickHandler }, // 自定義指令。注意,你無法對 `binding` 中的 `oldValue` // 賦值,因為 Vue 已經(jīng)自動為你進(jìn)行了同步。 directives: [ { name: 'my-custom-directive', value: '2', expression: '1 + 1', arg: 'foo', modifiers: { bar: true } } ], // 作用域插槽格式 // { name: props => VNode | Array} scopedSlots: { default: props => createElement('span', props.text) }, // 如果組件是其他組件的子組件,需為插槽指定名稱 slot: 'name-of-slot', // 其他特殊頂層屬性 key: 'myKey', ref: 'myRef', // 如果你在渲染函數(shù)中向多個元素都應(yīng)用了相同的 ref 名, // 那么 `$refs.myRef` 會變成一個數(shù)組。 refInFor: true }
總結(jié)
以上所述是小編給大家介紹的在element-ui的el-tree組件中用render函數(shù)生成el-button的實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!