ElementUi的table表格多选和可移除标签的联动

一：首先说说想要做什么东西

查看效果https://czy-1257069199.cos.ap-beijing.myqcloud.com/html/test/%E8%A1%A8%E6%A0%BC%E9%80%89%E6%8B%A9%E5%92%8C%E5%8F%AF%E5%88%A0%E9%99%A4%E6%8C%89%E9%92%AE%E7%9A%84%E8%81%94%E5%8A%A8.html

我想要做的是这样的一个效果，首先表格能够多个选择，然后右边有一些标签（内容是表格中的一项：name），最后表格的选择和标签能够完成联动，就是能够增加/删除一个或多个两边都有效果。

二：废话不多说，直接上代码

由于我是在Vue的脚手架里面写的，但是想要直接拿出来能够直接粘贴进去就能运行，所以改成了一个HTML。

    
    
    
    
    
    



    

        账号：
        
        
        邮箱：
        
        
        手机：
        
        
        查询
        重置
    
    

        
            
                
                
                
                
                
                
                
                
                
                
                
                
                    
                
                
                
                
            
            
            
                

                    
                        {{tag.name}}
                    
                
            
        
    

        

            
            
        
    
    
        确定
        关闭
    

 三：到这里就结束了

由于是摘出来的，注释没有几个，不过代码比较少，应该能看懂...，还有一点就是ElementUI的js、css和Vue的js要改成自己的地址，或者直接用cdn也行。还有一点就是如果想要把表格和标签分成两个模块来写的话就用vuex吧，不会的话可以去学习一下。