vue 封装elementUI table组件 动态列

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

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

直接上代码：TreeTableNew.vue

<template>
  <div>
    <el-table :data="opt.data" style="width: 100%" :row-key="opt.key" border>
      <template v-for="(column, index) in opt.columns">
        <el-table-column :prop="column.key" :key="column.key" :label="column.label">
          <template slot-scope="scope">
           
            <el-input-number
              v-if="column.showFlag.isnumber"
              v-model="scope.row.inputNum"
              controls-position="right"
              :min="1"
            ></el-input-number>

            <el-input v-else-if="column.showFlag.isinput" v-model="scope.row[column.key]"/>
            
            <span v-else>{
   
   {scope.row[column.key]}}</span>

          </template>
        </el-table-column>

      </template>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    opt: {
      type: Object
    }
  },
  data() {
    return {};
  },
  methods: {}
};
</script>

主要代码解释：

循环数据：

   opt.data是循环的列的数据，和正常使用一样（正常固定列你也得这么用），就是下面的一行4列的值比如code:'1#'、adjust:'50'

 循环列属性：

    使用for循环动态扩展列，列的属性封装在opt.columns里。可以很清楚的看出 opt.data和opt.columns的联系， opt.columns有5个属性key，正好对应了opt.data的5个值

   <template v-for="(column, index) in opt.columns">
        <el-table-column :prop="column.key" :key="column.key" :label="column.label">

列的类型判断:

这个主要通过opt.columns里的showFlag进行判断，可以自己根据自己的需要来

这样的话，主要的数据结构都是后台返回，前台不用动就可以实现动态列扩展。

使用组件的父页面：

<TreeTableNew :opt="opt"></TreeTableNew>

数据区域：

   opt: {
        data:[
          {
            code:'1#',
            // basic:'50',
            //  choice:'10',
            adjust:'50',
            target:'4848',
            actual:'5000',
          },
          {
            code:'2#',
            // basic:'40',
            //choice:'10',
            adjust:'40',
            target:'4000',
            actual:'4010',
          },
          {
            code:'3#',
            adjust:'50',
            target:'5000',
            actual:'5010',
          }
        ],
        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",

      },