用户交互的设计表格,html页面完成
大致效果如图,鼠标移入单元格,出现按钮可以追加子级
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4c97f16dc55f1c9e30d90405f19da005.png)
![dialog提示在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f71e7253c546d63d4594140dca374a12.png)
一、子组件结构
Vue.component(‘dimension_table’, {
props: [‘lists’],
name: ‘tree’,
data: function () {
return {}
},
methods:{},
template:``
});
1、data
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/57033acf9834543e697abf00fece0f2a.png)
2、methods
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c52092d610d697f014dbd0bd16631ec8.png)
3、template
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c0bbd9d8f141b16c7eb25a3296d81886.png)
二、父组件
#![表格的数据结构](https://i-blog.csdnimg.cn/blog_migrate/fc18d3313a739ad846c1461161c82804.png)
![调用子组件](https://i-blog.csdnimg.cn/blog_migrate/6f43c5ec7809c800210ae9006a4f0f99.png)
【不足:每个单元格的id没有按照“1”“1-1”“1-2”这样的层级式定义】