vue 封装elementUI table组件 动态列

 

目前需求是列是动态显示的，如果是单纯的列很好搞，直接循环，需求是每个列的格式不一样，有的列是文字，有的是输入框，有的是计算框，

具体需求如下图：有空给出注释解释

直接上代码：TreeTableNew.vue

 

使用组件的父页面：

数据区域：

   opt: {
        data:[
          {
            code:'1#',
            // basic:'50',
            //  choice:'10',
            adjust:'50',
            target:'4848',
            actual:'5000',
            inputNum:'30',
          },
          {
            code:'2#',
            // basic:'40',
            //choice:'10',
            adjust:'40',
            target:'4000',
            actual:'4010',
            inputNum:'30',
          },
          {
            code:'3#',
            adjust:'50',
            target:'5000',
            actual:'5010',
            inputNum:'30',
          }
        ],
        columns: [
          {
            key: 'code',
            label: '站',
            showFlag:{
              isnumber:false,
              isinput:false,
            },
          },
          {
            key: 'adjust',
            label: '调整',
           showFlag:{
              isnumber:true,
              isinput:false,
            },
          },
          {
            key: 'target',
            label: '目标',
           showFlag:{
              isnumber:false,
              isinput:true,
            },

          },
          {
            key: 'actual',
            label: '实际',
           showFlag:{
              isnumber:false,
              isinput:true,
            },

          }
        ],
        key: "id",

      },