iview表格和简单递归方法

最新推荐文章于 2024-07-22 14:10:26 发布

布依前端

最新推荐文章于 2024-07-22 14:10:26 发布

阅读量315

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： javascript css3 es6 node.js html5

本文链接：https://blog.youkuaiyun.com/qq_41444226/article/details/105849858

vue 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种在表格中实现操作列多状态控制的方法，通过将操作模块单独提取，利用Vue.js的渲染函数定制操作列。文章详细展示了如何初始化操作列、加载操作集合，并提供了一个递归处理部门树数据的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

业务需求：需要对表格操作栏进行多状态控制时，我们就需要把操作模块单独提取出来；

1、初始化操作列：

{title:'其他列'}，
{
   title: '操作',
    key: 'action',
    width: 150,
    align: 'center',
    render: (h, params) => {
        let state = params.row.state;
        return this.init(h,params,state)
    }
}

2、加载操作集合

  init(h,params,state){
       return h('div',[
           h('i', {
               class: 'icon iconshanchu',
               style: {
                   fontSize: '14px',
                   color: '#999999',
                   cursor: 'pointer'
               },
               on: {
                   click: () => {
                       this.removeItem(params)
                   }
               }
           }),
           h('i', {
               class: 'icon iconbianji_1',
               style: {
                   fontSize: '14px',
                   marginLeft: '10px',
                   color: '#999999',
                   cursor: 'pointer'
               },
               on: {
                   click: () => {
                       this.editItem(params.row,params.index)
                   }
               }
           }),
           h('i', {
               class: 'icon iconchakan',
               title:'查看',
               style: {
                   fontSize: '18px',
                   marginLeft: '10px',
                   color: '#999999',
                   cursor: 'pointer'
               },
               on: {
                   click: () => {
                       this.lookDetail(params.row,params.index)
                   }
               }
           }),
       ])
   },

3、简单递归写法：

// 递归部门树，data是任意数组，value和label是iview树需要的必要字段，接口未返回，此处为自定义；

 dealChildData(data){
    data.forEach(el => {
          el.value = el.id;
          el.label = el.title;
          if (el.childrenDepart.length > 0 && el.childrenDepart !==null) {
             el.children = el.childrenDepart; 
             this.dealChildData(el.childrenDepart);
          }
      }); 
  }