vue+eleui实现三级联动

最新推荐文章于 2024-07-25 11:21:59 发布

lu_kuankuan

最新推荐文章于 2024-07-25 11:21:59 发布

阅读量1.8k

点赞数 1

分类专栏： vue 文章标签： vue 三级联动 eleui

本文链接：https://blog.csdn.net/lu_kuankuan/article/details/80199502

版权

这是一个基于Vue和EleUI实现的三级联动组件，用于业务通讯录的查询条件展示。点击新建按钮会弹出包含三级联动选择的对话框。组件中包含了公司/部门、业务类型、商机类别和服务类别的展示，以及业务简介、对接人信息等。通过el-popover进行数据展示，并提供了编辑和删除功能。

摘要由CSDN通过智能技术生成

 
  < 
  template 
  > 
 
 
  <!-- 资源管理下的业务功能查询条件组件L 粘贴在vue任意组件中就能运行 点击新建 弹出框显示三级联动 请忽略样式 --> 
 
 
  < 
  div 
  class= 
  "yh_BusinessTable" 
  > 
 
 
  < 
  div 
  class= 
  "BusinessTable_title clearfix" 
  > 
 
 
  < 
  h3 
  class= 
  "fl" 
  >业务通讯录 
  </ 
  h3 
  > 
 
 
  < 
  div 
  class= 
  "el_btn fr" 
  > 
 
 
  < 
  el-button 
  size= 
  "mini" 
  type= 
  "warning" 
  round 
  @click="new_dialog()" 
  >新建 
  </ 
  el-button 
  > 
 
 
  </ 
  div 
  > 
 
 
  < 
  a 
  class= 
  "fr" 
  href= 
  "javascript:void(0)" 
  >去知识库查看更多业务资料... 
  </ 
  a 
  > 
 
 
  </ 
  div 
  > 
 
 
  < 
  div 
  class= 
  "main_table" 
  > 
 
 
  < 
  el-table 
  :data="tableData" 
  stripe 
  size= 
  "mini" 
  max-height= 
  800 
  style= 
  "width: 100%" 
  > 
 
 
  < 
  el-table-column 
  label= 
  "公司/部门" 
  show-overflow-tooltip 
  width= 
  "" 
  align= 
  "center" 
  > 
 
 
  < 
  template 
  slot-scope= 
  "scope" 
  > 
 

                
  < 
  el-popover 
  trigger= 
  "hover" 
  placement= 
  "top" 
  > 
 

        
  < 
  p 
  >{
  { scope.row.department }} 
  </ 
  p 
  > 
 

        
  < 
  div 
  slot= 
  "reference" 
  class= 
  "name-wrapper" 
  > 
 

        
  < 
  el-tag 
  size= 
  "mini" 
  >{
  { scope.row.department }} 
  </ 
  el-tag 
  > 
 

        
  </ 
  div 
  > 
 

        
  </ 
  el-popover 
  > 
 
 
  </ 
  template 
  > 
 
 
  </ 
  el-table-column 
  > 
 
 
  < 
  el-table-column 
  label= 
  "业务类型" 
  width= 
  "" 
  align= 
  "center" 
  > 
 
 
  < 
  template 
  slot-scope= 
  "scope" 
  > 
 
 
  < 
  el-popover 
  trigger= 
  "hover" 
  placement= 
  "top" 
  > 
 

        
  < 
  p 
  >{
  { scope.row.business }} 
  </ 
  p 
  > 
 

        
  < 
  div 
  slot= 
  "reference" 
  class= 
  "name-wrapper" 
  > 
 

        
  < 
  el-tag 
  size= 
  "mini" 
  >< 
  a 
  href= 
  "javascript:void(0)" 
  @click="business_(scope.row.id)" 
  >{
  {scope.row.business}} 
  </ 
  a 
  ></ 
  el-tag 
  > 
 

        
  </ 
  div 
  > 
 

        
  </ 
  el-popover 
  > 
 
 
  </ 
  template 
  > 
 
 
  </ 
  el-table-column 
  > 
 
 
  < 
  el-table-column 
  label= 
  "商机类别" 
  width= 
  "" 
  align= 
  "center" 
  > 
 
 
  < 
  template 
  slot-scope= 
  "scope" 
  > 
 

     
  < 
  el-popover 
  trigger= 
  "hover" 
  placement= 
  "top" 
  > 
 

        
  < 
  p 
  >{
  { scope.row.commerce }} 
  </ 
  p 
  > 
 

        
  < 
  div 
  slot= 
  "reference" 
  class= 
  "name-wrapper" 
  > 
 

        
  < 
  el-tag 
  size= 
  "mini" 
  >{
  { scope.row.commerce }} 
  </ 
  el-tag 
  > 
 

        
  </ 
  div 
  > 
 

        
  </ 
  el-popover 
  > 
 
 
  </ 
  template 
  > 
 
 
  </ 
  el-table-column 
  > 
 
 
  < 
  el-table-column 
  label= 
  "服务类别" 
  width= 
  "" 
  align= 
  "center" 
  > 
 
 
  < 
  template 
  slot-scope= 
  "scope" 
  > 
 

      
  < 
  el-popover 
  trigger= 
  "hover" 
  placement= 
  "top" 
  > 
 

        
  < 
  p 
  >{
  { scope.row.service }} 
  </ 
  p 
  > 
 

        
  < 
  div 
  slot= 
  "reference" 
  class= 
  "name-wrapper" 
  > 
 

        
  < 
  el-tag 
  size= 
  "mini" 
  >{
  { scope.row.service }} 
  </ 
  el-tag 
  > 
 

        
  </ 
  div 
  > 
 

        
  </ 
  el-popover 
  > 
 
 
  </ 
  template 
  > 
 
 
  </ 
  el-table-column 
  > 
 
 
  < 
  el-table-column 
  label= 
  "业务简介" 
  width= 
  "" 
  align= 
  "center" 
  > 
 
 
  < 
  template 
  slot-scope= 
  "scope" 
  > 
 

      
  < 
  el-popover 
  trigger= 
  "hover" 
  placement= 
  "top" 
  > 
 

        
  < 
  p 
  >{
  
 