element UI 动态生成表头

       最近开始搞vue了。

       由于 element UI 中的 table 不能像 antd 里的 table 直接注入 json 字符串生成表头，这导致了不能轻松的通过后台生成表格，或是对表头进行排序，在网上参考找了一种最简易的方法，可以给表格里面注入各种自己想要的效果，代码如下：

相应的json字符串为以下：

 tableColumns: [
        {
          id: 1, 
          label: '岗位编号',
          prop: 'id',
          align: 'center',
          disabled: true,
          visible: true,
        },
        {
          id: 2,
          label: '岗位编码',
          prop: 'code',
          align: 'center',
          disabled: true,
          visible: true,
        },
        {
          id: 3,
          label: '岗位名称',
          prop: 'name',
          align: 'center',
          disabled: false,
          visible: true,
        },
        {
          id: 4,
          label: '岗位排序',
          prop: 'sort',
          align: 'center',
          disabled: false,
          visible: true,
        },
        {
          id: 5,
          label: '状态',
          prop: 'status',
          align: 'center',
          disabled: false,
          visible: true,
        },
        {
          id: 6,
          label: '创建时间',
          prop: 'createTime',
          align: 'center',
          disabled: false,
          visible: true,
          width: 180
        },
      ],

其中id是用来扩展功能，方便进行tree操作，label是表头名称，prop是对应后台字段，align是对齐方式，disabled是扩展tree操作的选择，visible是用开显示隐藏的，由此扩展功能来给表头做移动和显隐，引用一个小插件：

 这个小组件可以拖拽，来控制表头的顺序及隐藏，json中的disabled 控制这个列 是不可隐藏的。