element中Tree树形组件使用render-content自定义样式

要做一个关联设备的功能有一个设备的树，如果设备已经关联过就禁用，并且在右侧显示关联的编码，并且可以进行解绑操作：

使用element自定义节点做的。因为要使用JSX语法所以要先安装transform-vue-jsx

下载依赖：

npm install 
babel-plugin-syntax-jsx 
babel-plugin-transform-vue-jsx
babel-helper-vue-jsx-merge-props
babel-preset-env
–save-dev

然后在前端.babelrc文件中配置插件即可：

<el-tree
	:data="treeData"
	ref="tree"
	node-key="id"
	:check-on-click-node="true"
	:default-checked-keys="defaultCheckList"
	highlight-current
	default-expand-all
	:expand-on-click-node="false"
	class="height scoll-y"
	:props="defaultProps"
	show-checkbox
	:render-content="renderContent">
</el-tree>

tree添加组件，添加render-content和方法

//自定义设备树
renderContent(h, { node, data, store }) {

	if(data.level == 0){
		return (
		<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
			<span>
			<span>{node.label}</span>
			</span>
			<span>
				<span style="font-size: 12px;margin-right: 40px;">关联设备</span>
				<span style="font-size: 12px;margin-right: 10px;">操作</span>
			</span>
		</span>);
	}else if(data.level == 4 && data.qualityDeviceCode != null && data.qualityDeviceCode != '' && data.qualityDeviceCode != this.deviceInfo.deviceCode){
		return (
		<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
			<span>
			<span>{node.label}</span>
			</span>
			<span>
			<el-button style="font-size: 12px;" type="text">{data.qualityDeviceCode}</el-button>
			<el-button style="font-size: 12px;" type="text" on-click={ () => this.relieve(node, data) }>解除绑定</el-button>
			</span>
		</span>);
	}else{
		return (
		<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
			<span>
			<span>{node.label}</span>
			</span>
		</span>);
	}
	
},

因为只有已经关联并且是设备那一级才显示解绑等操作所以加了一些判断
设备解除时将设备禁用状态改为false，并且隐藏解绑等操作：

relieve(node,data){
	const parent = node.parent;
	const children = parent.data.children || parent.data;
	const index = children.findIndex(d => d.id === data.id);//获取解绑设备所在树的设备集合的下标
	children[index].disabled=false;
	children[index].qualityDeviceCode='';
	...其他操作
}

将节点信息修改后树会去除解绑等操作的显示