Generate EL-Button instance code with the render function in the ELEMENT-UI EL-TREE component

This article mainly describes how to generate EL-Button through the Render function in the EL-TREE component.

This is EL-Tree tree in ELEMENT-UI:

在element-ui的el-tree组件中用render函数生成el-button的实例代码

This is the effect of implementation:

在element-ui的el-tree组件中用render函数生成el-button的实例代码

Tree.Vue file, the specific implementation code is as follows:

   export default {name : 'Tree', Data: Function () {Return {Treedata: [{ID: 1, Label: 'first ", code:' 1 ', children: [{ID: 4, Label:' Second", CODE : '1-1', Children: [{ID: 9, Label: 'Levels', Code:' 1-1-1 ',}, {ID: 10, Label:' Level 3 ', Code:' 1 -1-2 ',}]}]}], defaultprops: {children:' children, label: 'label'}}}, methods: {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'}}}}}  】  .lex; margin-left: 15px;} .floatspan {float: right; margin-top: 8px; margin-right: 10px; padding: 5px;} .el-tree {Width: 33 %; margin: 92px auto;}    Mainly said this code:    
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’}}, ‘Delete’ ])}

Detailed description in the document: https: //cn.Vuejs.org/v2/guide/render-function.html
  h (// Parameter 1: {String | Object | Function}, an HTML tag string, component option object, or resolving an ASYNC asynchronous function, required parameters. 'EL -Button ', // Parameter 2: {Object} A data object containing template-related properties, which can use these features, optional parameters {}, // parameter 3: {String | Array}, if it is directly characters in Template The string will generate a "text virtual node; if it is an array, you can generate sub-virtual nodes 'deletion')  
parameter 2 can be generated in an array. There is a detailed introduction in the document:

{// and `v-bind: Class` The same API // receives a string, object or string and object composition Array ‘Class’: {foo: true, bar: false}, // and `v-bind: style`API // Receive array: {color: ‘red’, fontsize: ’14px’}, // Ordinary HTML Features atTRS: {ID: ‘foo’}, // Component PrOPS Props: {myprop: ‘bar’}, // DOM Properties DOMPROPS: {InnerHtml: ‘Baz’}, // Event Loker Based on `on` // So no longer support, such as` v-on: keyup.enter` The device / / need to manually match KeyCode. ON: {Click: this.clickHandler}, // For components, it is used to monitor native events instead of using // `VM. $ EMIT` triggered. Nativeon: {Click: this.nativeClickHandler}, // Custom instruction. Note that you can’t assign values ​​to `binding` //, because Vue has automatically synchronized for you. Directives: [{name: ‘my-custom-directive’, value: ‘2’, expression: ‘1 + 1’, arg: ‘foo’, modifiers: {bar: true}}], // scope slot Format // {name: props => vNode | Array } scopedslots: {default: props => CreateElement (‘span’, props.text)}, // If the component is a sub-component of other components, you need to plug Slot Specified Name Slot: ‘Name-of-slot ‘, // Other Special Top Properties Key:’ mykey ‘, ref:’ myref ‘, // If you apply the same REF name to multiple elements in the rendering function, then `$ Refs.myref`s becomes an array. Refinfor: true}
   
Summary

The above is the EL-TREE of the ELEMENT-UI described above. In the component, use the render function to generate EL-Button instance code, I hope to help everyone. If you have any questions, please leave a message, the small package will reply to everyone. Thank you very much for your support of Tumi Cloud Website!

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment