oportunidad
Un problema que se presenta al usar el-tree sin un cuadro de selección es que cuando se hace clic en una fila de datos, habrá un color de fondo, pero cuando el mouse hace clic en otro lugar, el foco se perderá y el color de fondo desaparecerá.
Este artículo presenta principalmente las funciones de selección, resaltado y posicionamiento del el-tree de vue2+elementUI. La función de posicionamiento implica no importa en qué menú se encuentre actualmente. Después de eliminar un determinado menú, el menú de actualización saltará a todo el historial que necesita ser preservado. Expanda Estado , este artículo lo presenta en detalle a través de códigos de ejemplo, que tiene cierto valor de referencia para su estudio o trabajo. Los amigos que lo necesiten pueden consultarlo. El efecto deseado es el siguiente
:
El mouse se desliza sobre el texto resaltado y el color de fondo, y el mouse hace clic en otro lugar, el color de fondo y el texto permanecen en su lugar
Implementación
html parcialmente implementado
<el-tree
ref="tree"
:data="treeData"
:current-node-key="currentNodeKey"
node-key="id"
:default-expanded-keys="defaultExpandedKeys"
@node-click="handleNodeClick"
@node-expand="handleNodeExpand"
@node-collapse="handleNodeCollapse"
:highlight-current="true"
:expand-on-click-node="false"
:props="defaultProps"
v-loading="treeLoading"
>js implementación parcial
export default {
data() {
return {
defaultProps: {
children: "children",
label: "name",
},
currentNodeKey: 1, // 当前选中节点
treeLoading: false, // treeLoading
defaultExpandedKeys: ['1'],
treeData: [{
id: 1,
name: '全部',
level: 1,
children: [{
id: 2,
level: 2,
name: '未分类',
},
{
id: 4,
name: '二级 1-1',
level: 2,
children: [{
id: 9,
level: 3,
name: '三级 1-1-1'
}, {
id: 10,
level: 3,
name: '三级 1-1-2'
}]
}]
}]
};
},
methods: {
/**
* @description: 点击节点
* @param {Object} data
* @param {Object} node
* @return {*}
*/
handleNodeClick(data, node){
this.currentNodeKey = data.id;
// 判断点击的层级进行操作
if(node.level === 1){
console.log('第一层data1',data);
console.log('第一层node1',node);
}else if(node.level === 2){
console.log('第二层data2',data);
console.log('第二层node2',node);
}else if(node.level === 3){
console.log('第三层data3',data);
console.log('第三层node3',node);
}
},
/**
* @description: 树节点展开
* @param {Object} data
* @return {*}
*/
handleNodeExpand (data) {
// 判断当前节点是否存在， 存在不做处理,不存在则存到数组里
if (!this.defaultExpandedKeys.includes(data.id)) {
this.defaultExpandedKeys.push(data.id)
}
},
/**
* @description: 树节点关闭
* @param {Object} data
* @return {*}
*/
handleNodeCollapse (data) {
for (let i = 0; i < this.defaultExpandedKeys.length; i++) {
if (this.defaultExpandedKeys[i] === data.id) {
this.defaultExpandedKeys.splice(i, 1);
}
}
},
/**
* @description: 获取树形结构菜单
* @param {*}
* @return {*}
*/
async getTreeData(){
this.treeLoading = true;
await request({
url: ``,
method: 'get',
}).then(res => {
this.treeData = res.data;
// 不加会跳到全部
this.$nextTick(() => {
this.$refs['tree'].setCurrentKey(this.currentNodeKey);
})
}).finally(() => {
this.treeLoading = false;
});
},
/**
* @description: 文件夹删除
* @param {String} id
*/
delFileConfirm(id) {
const h = this.$createElement;
this.$msgbox({
title: '提示',
message: h('p', null, [h('span', null, `确认删除该文件夹及其子文件夹吗？`)]),
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
request({
url: '',
method: 'post',
data: {
id,
},
}).then(async (res) => {
if (res.code === '0') {
this.$message({
type: 'success',
message: '删除成功!'
});
done();
await this.getTreeData();
}
}).finally(()=> {
instance.confirmButtonLoading = false;
})
} else {
done();
instance.confirmButtonLoading = false;
}
}
}).then(action => {});
},
}
};
</script>implementación parcial css
Principalmente para resaltar
<style scoped>
/* 鼠标hover改变背景颜色 */
.el-tree /deep/ .el-tree-node .el-tree-node__content:hover {
background-color: #f0f7ff !important;
color: #409eff;
}
/* 颜色高亮 */
/deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
color: #409eff;
}
</style>indicación de parámetro
:default-expand-all ----> abre todos los nodos por defecto
:claves-expandidas-predeterminadas----> nodos abiertos predeterminados
:data="treeData" ----> Datos de visualización obligatorios
@node-click="handleNodeClick" ----> devolución de llamada cuando se hace clic en el nodo
node-key="id" ----> Establecer la clave de los datos seleccionados
:current-node-key="currentNodeKey" ----> Establecer el valor seleccionado inicialmente
:highlight-current="true" ----> establecer resaltado debe escribir
:props="defaultProps" ----> puede configurar el valor del atributo de la etiqueta del nodo
punto clave
- Establecer resaltado actual en verdadero
- Establezca la clave de nodo actual en clave de nodo actual y restablezca la clave de nodo actual al actualizar la interfaz al mismo tiempo, el código es el siguiente
this.$nextTick(() => { this.$refs['tree'].setCurrentKey(this.currentNodeKey); })- Si no está expandido de forma predeterminada, debe actualizarse para mantener los datos expandidos originales y continuar expandiéndose.
@node-expand="handleNodeExpand" // 展开节点时触发的函数 @node-collapse="handleNodeCollapse" // 关闭节点时触发的函数