1.前端代码 renderContent(h, data) {//return data.label;//debuggerif(data.typeName == "楼栋长"){return( )/*return ( {data.label} {data.phone} 包靠楼栋: {data.buildName} );*/}elseif(data.typeName == "一级"){return(...
npm install --save-dev less less-loader main.js文件引入并使用: import Vue2OrgTree from 'vue2-org-tree' import 'vue2-org-tree/dist/style.css'; Vue.use(Vue2OrgTree); 2.具体实现代码 进入页面: <template> <vue2-org-tree :data="treeData" :renderContent="renderContent" @on-node-mouse...
可以通过render-content属性自定义节点的内容。例如: html <vue2-org-tree :data="treeData" :render-content="renderContent" /> 在Vue组件的methods中定义renderContent方法: javascript methods: { renderContent(h, data) { return h('div', [ h('span', data.label), h('br'), h('span'...
然而,这通常不是 Vue 渲染流程中的问题,因为 Vue 会在mounted钩子执行后重新渲染组件。 renderContent方法:你的renderContent方法使用了 JSX 语法(虽然你在标签中没有声明lang="jsx"或类似的,但 Vue 通常通过 Babel 插件支持 JSX)。这个方法本身看起来没有问题,但请确保你的项目配置支持 JSX。如果 JSX 转换不正确...
<el-button style="position: absolute; top: 0;" @click="clickGeneratePicture">下载</el-button> <vue2-org-tree v-drag :data="data" :horizontal="!horizontal" :collapsable="collapsable" :label-class-name="labelClassName" :render-content="renderContent" ref="imageDom" @on-expand="onExpand"...
renderContenthow to render node labelFunction- labelClassNamenode label classFunction|String- selectedKeyThe key of the selected nodeString- selectedClassNameThe className of the selected nodeFunction|String- events event namedescriptontype clickClick eventFunction ...
renderContent how to render node label Function - labelClassName node label class Function | String - selectedKey The key of the selected node String - selectedClassName The className of the selected node Function | String - events event namedescriptontype click Click event Function mouseover onMou...
renderContenthow to render node labelFunction- labelClassNamenode label classFunction|String- selectedKeyThe key of the selected nodeString- selectedClassNameThe className of the selected nodeFunction|String- events event namedescriptontype clickClick eventFunction ...
npm install -D less-loader less *:官方文档引入样式的时候是导入的 less 文件 3、main.js中引入 importVuefrom'vue'importVue2OrgTreefrom'vue2-org-tree'Vue.use(Vue2OrgTree)// ... 4、组件中使用 template代码 <vue2-org-tree:data="treeData"collapsable:render-content="renderContent"@on-expand=...
<vue2-org-tree:data="treeData"collapsable:render-content="renderContent"@on-expand="onExpand"@on-node-click="NodeClick"/> 数据 data () { return { treeData: { id:'0', label:"NBA季后赛", children: [ { id:'1', label:"西部球队", ...