element|element 树形控件el-tree 添加hover事件 完整代码
export default {
data() {
return {
data: [{
id: 1,
label: '一级 1',
is_show:false,
children: [{
id: 4,
label: '二级 1-1',
is_show:false,
children: [{
id: 9,
is_show:false,
label: '三级 1-1-1'
}, {
id: 10,
is_show:false,
label: '三级 1-1-2'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
append(data) {
const newChild = { id: id++, label: 'testtest', children: [] };
if (!data.children) {
this.$set(data, 'children', []);
}
data.children.push(newChild);
},remove(node, data) {
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1);
},
/**这里是关键一步，实现hover */
renderContent(h, { node, data, store }) {
console.log(data)
return (
{data.is_show=true}}on-mouseout={()=>{data.is_show=false}}>
{node.label}
{
data.is_show ? this.append(data)}>添加
this.remove(node, data)}>编辑
this.remove(node, data)}>删除
: null
});
},}【element|element 树形控件el-tree 添加hover事件 完整代码】
文章图片
推荐阅读
- element-ui|element-ui 弹窗组件封装 极简方案
- Android之ProgressBar 手把手教学使用控件
- SAP|SAP UI5 Form 控件的 ColumnLayout 布局特性
- vue|Vue + ElementUI+ el-autocomplete 组件的防抖方案的懒加载
- elementui源码学习之仿写一个el-tooltip
- 前端|9.06 Day47---Element UI局部组件库的使用
- 使用element-ui中的el-radio（单选框）组件实现选中和取消选中功能
- 关于|关于 SAP UI5 所有控件的共同祖先 - sap.ui.base.ManagedObject
- SAP|SAP UI5 进阶 - XML 视图里定义的 UI 控件，运行时实例化的技术细节剖析
- Python基于Ui控件解析的自动化实现微信自动回复（关键词自动回复）