苏州网站建设哪里好,网站开发需要学,建设网站目的及功能定位,招投标信息查询平台2023.12.11今天我学习了如何对el-tree进行搜索的功能#xff0c;效果如下#xff1a; 代码如下#xff1a;
重点部分#xff1a;给el-tree设置ref#xff0c;通过监听roleName的变化过滤数据。
default-expand-all可以设置默认展开全部子节点。
check可以拿到当前节点的…2023.12.11今天我学习了如何对el-tree进行搜索的功能效果如下 代码如下
重点部分给el-tree设置ref通过监听roleName的变化过滤数据。
default-expand-all可以设置默认展开全部子节点。
check可以拿到当前节点的点击事件比check-change好用。 :filter-node-methodfilterNode过滤节点
templatediv classhead-containerel-inputv-modelroleNameclearableplaceholder请输入角色/用户名称prefix-iconel-icon-searchsizesmallstylemargin-bottom: 10px//divel-treerefrole_tree:default-expand-alltrue:dataroleOptions:expand-on-click-nodefalse:filter-node-methodfilterNode:propsdefaultPropshighlight-currentcheckhandleNodeClicknode-keyidshow-checkbox/
/template
script
export default{data(){return{roleName:,roleOptions: [],//角色列表defaultProps: {children: children,label: label},}},watch:{roleName(val){this.$refs.role_tree.filter(val)//根据el-tree的ref进行过滤}},methods:{// 筛选节点filterNode(value, data) {if (!value) return truereturn data.label.indexOf(value) ! -1},// 当前节点的点击事件handleNodeClick(data){}}
}
/script
