如图所示，点击左侧查看权限，点击修改可以进行修改选择，并带有input输入框以及单选框进行配置
element+vue展示代码：
<el-tree v-show="!authorityDialog" :class="{'treeId':!authorityDialog,'deffront':!authorityDialog&&radioNum===1}"
:data="treeData" node-key="id" default-expand-all :expand-on-click-node="false"
:render-content="renderContentNocheck">
</el-tree>
<el-tree v-if="authorityDialog" :data="treeData" show-checkbox ref="tree"
node-key="id" default-expand-all :class="{'front':authorityDialog&&radioNum===1}"
@node-click="handleNodeClick" :default-checked-keys="checkedKeys"
:expand-on-click-node="false" :render-content="renderContent">
</el-tree>render函数返回数据：
renderContent(h, { node, data, store }) {
if (node.childNodes.length > 0) {
// if(node.data.befId==124){
// return (
// <span class="custom-tree-node nocheck">
// <span class="el-icon-cdm-wenjianjia1">{node.data.vMenuName}</span>
// </span>
// );
// }else
if(node.data.befId!=124){
return (
<span class="custom-tree-node ">
<span class="el-icon-cdm-wenjianjia1">{node.data.vMenuName}</span>
</span>
);
}
} else {
if (node.data.pid == 124) {
// return ('')
// return (
// <span class="custom-tree-node nocheck">
// <input type="radio" class="input_radio" name='fromWhere' id={node.data.id} />
// <label for={node.data.id}>
// <span class="el-icon-document">{node.data.vMenuName}</span>
// </label>
// </span>
// );
}else if (node.data.pfid == 124) {
// return ('')
// if(node.data.isInput){
// return (
// <span class="custom-tree-node nocheck">
// <label for={node.data.id}>
// <span class="el-icon-minus">
// <input type="radio" class="input_radio" name='byday' id={node.data.id} />
// {node.data.vMenuName}</span>
// <input type="text" class="input_num" id={"radio" + node.data.vMenuId}
// onkeyup="value=value.replace(/[^\d]/g,'')" />天
// </label>
// </span>
// );
// }else{
// return (
// <span class="custom-tree-node nocheck">
// <label for={node.data.id}>
// <span class="el-icon-minus">
// <input type="radio" class="input_radio" name='byday' id={node.data.id} />
// {node.data.vMenuName}</span>
// </label>
// </span>
// );
// }
} else {
return (
<span class="custom-tree-node ">
<span class="el-icon-document">{node.data.vMenuName}</span>
</span>
);
}
}
},
renderContentNocheck(h, { node, data, store }) {
if (node.childNodes.length > 0) {
if (node.data.isPower) {
return (
<span class="custom-tree-node el-icon-cdm-correct">
<span class="el-icon-cdm-wenjianjia1">{node.data.vMenuName}</span>
</span>
);
} else {
return (
<span class="custom-tree-node el-icon-minus">
<span class="el-icon-cdm-wenjianjia1">{node.data.vMenuName}</span>
</span>
);
}
} else {
if (node.data.pfid == 124) {
if(node.data.isInput){
if (node.data.isPower){
return (
<span class="custom-tree-node el-icon-more">
<span class="el-icon-cdm-correct">{node.data.vMenuName}</span>
{node.data.msgtime}
</span>
);
}else{
return (
<span class="custom-tree-node el-icon-minus">
<span class="el-icon-more">{node.data.vMenuName}</span>
{node.data.msgtime}
</span>
);
}
}else if (node.data.isPower) {
return (
<span class="custom-tree-node el-icon-more">
<span class="el-icon-cdm-correct">{node.data.vMenuName}</span>
</span>
);
}else{
return (
<span class="custom-tree-node el-icon-minus">
<span class="el-icon-more">{node.data.vMenuName}</span>
</span>
);
}
}else {
if (node.data.isPower) {
return (
<span class="custom-tree-node el-icon-cdm-correct">
<span class="el-icon-document">{node.data.vMenuName}</span>
</span>
);
} else {
return (
<span class="custom-tree-node el-icon-minus">
<span class="el-icon-document">{node.data.vMenuName}</span>
</span>
);
}
}
}
}
带有输入框以及单选条件的部分：
<div class="byfrom" v-if="authorityDialog&&radioNum===1&&treeData.length>0">
<i class="el-icon-caret-bottom" ref="caret" @click="clickBy"></i>
<div class="byTitle"> <i class="el-icon-cdm-wenjianjia1"></i>历史消息读取</div>
<div id="groupRadioBox" >
<el-radio label="byday" v-model="byfrom" ><i class="el-icon-document"></i> 按自然日</el-radio>
<el-radio-group v-model="radioDay" v-if="byfrom=='byday'">
<el-radio :label="7">最近7天</el-radio>
<el-radio :label="15">最近15天</el-radio>
<el-radio :label="30">最近30天</el-radio>
<el-radio :label="''">自定义天数
<el-input-number :controls='false' v-model="radioDayNum" size="mini" :min="0" label=""></el-input-number>天
</el-radio>
</el-radio-group>
<el-radio label="bymsgday" v-model="byfrom"><i class="el-icon-document"></i> 按消息日
<span>(有交互记录的1自然日为1消息日)</span>
</el-radio>
<el-radio-group v-model="radioMsgday" v-if="byfrom=='bymsgday'">
<el-radio :label="7">最近7天</el-radio>
<el-radio :label="15">最近15天</el-radio>
<el-radio :label="30">最近30天</el-radio>
<el-radio :label="''">自定义天数
<el-input-number :controls='false' v-model="radioMsgdayNum" size="mini" :min="0" label=""></el-input-number>天
</el-radio>
</el-radio-group>
<el-radio label="bymsg" v-model="byfrom"><i class="el-icon-document"></i> 按消息条数</el-radio>
<el-radio-group v-model="radioMsg" v-if="byfrom=='bymsg'">
<el-radio :label="100">最近100条</el-radio>
<el-radio :label="300">最近300条</el-radio>
<el-radio :label="500">最近500条</el-radio>
<el-radio :label="''">自定义条数
<el-input-number :controls='false' v-model="radioMsgNum" size="mini" :min="0" label=""></el-input-number>条
</el-radio>
</el-radio-group>
</div>
</div>自己添加的点击收缩事件，仿照jquery的slidedown
clickBy(){
let slide = {
down : function(div){
div.style.height='140px';
},
up : function(div){
div.style.height='0';
}
}
function toggleSlide(id,s){
var div = document.getElementById(id),
div_height = div.offsetHeight;
div.style.transition='height '+s+'ms';
div.style.overflow='hidden';
if(div_height){
slide.up(div);
}else{
slide.down(div);
}
}
toggleSlide('groupRadioBox','300')
let classN=this.$refs.caret.className
if(classN=='el-icon-caret-bottom'){
this.$refs.caret.setAttribute("class",'el-icon-caret-right')
}else{
this.$refs.caret.setAttribute("class",'el-icon-caret-bottom')
}
}