vue+element實作動态表格：根據背景傳回的屬性名和字段動态生成表頭可變表格
由于項目需求，需要有一個動态表格，可以根據配置或從背景擷取表格屬性列。
場景描述：
現有一個胡蘿蔔廠生産不同品種的胡蘿蔔，為了便于客戶了解産品，現需在官網展示胡蘿蔔資訊。現有的蘿蔔資訊：編号（id）、名稱（name）、保存期限（age）、特點（remark），但是日後會有擴充資訊，可能會加上顔色、體積等資訊。
問題分析：
現在可以确定胡蘿蔔有4個屬性要展示，以後還要擴充資訊，而且這個廠以後可能生産别的蔬菜水果，也需要展示相應資訊，需求變動的話要修改很多代碼。這時候如果有一個動态表格，表格的表頭資訊從背景擷取（或在js中配置），那日後修改胡蘿蔔表的屬性（增加或删除表字段）時就不用修改前端頁面代碼，長遠一點來看，日後這個廠生産别的蔬菜水果也需要資訊展示時，這個表格就可以複用（把表格抽出來當一個模闆，需要用的頁面引用即可，這個代碼我有時間會從項目中整理出來）。
代碼上場啦！！！
動态表格
可選擇屬性:
{{scope.row[scope.column.property]}}
注意tableColumnList就是實作動态的關鍵因素！
tableColumnList裡面存放的就是我們通過js檔案或者接口擷取到的表頭屬性，内容如下：
[{prop: ‘id’, propName: ‘編号’},
{prop: ‘name’, propName: ‘名稱’},
{prop: ‘age’, propName: ‘保存期限’},
{prop: ‘remark’, propName: ‘特點’}],
prop跟胡蘿蔔表中的字段是一一對應的，propName就是每個字段的中文名，也即在表頭顯示的名字。
tableColumnList的擷取方法有兩種：
（1）在前端js中配置
我是放在static檔案夾下面的config.js中，目錄如下：
内容：直接聲明一個數組變量并指派就好，用的時候引入js直接使用名字就可以使用
放在這裡的好處：前端項目打包成dist時，會把這個static檔案夾放在dist裡面，以後修改的時候就直接修改js配置檔案，不用動.vue源代碼。
（2）從後端接口擷取
注意，采用此種方法擷取。後端接口一定要同時傳回屬性的中文名和英文名，即prop和propName。
還有一個關鍵步驟，就是一定要在在頁面渲染之前擷取到tableColumnList，然後再去渲染表格，這就涉及到vue的生命周期了，這塊不做多餘解釋，我是直接在created中調用擷取tableColumnList的方法，整個js如下：
解釋一下menuChange方法：
當使用者勾選一個可選擇屬性之後，就觸發這個方法，這個方法主要做一件事情：
改變tableColumnList的值，進而動态改變表格的列
頁面效果如下：
可選擇屬性有兩個(也可以看作以後可能擴充的屬性，這裡隻示範一下動态效果)，勾選之後:
注意
動态表格與element一般表格在使用方法上的兩個差別：
1、label與property的指派方式
動态表格，表格的label和property是動态根據背景傳回的資料(或者從js擷取)來取值的，背景傳回的資料就是上面的tableColumnList。
2、屬性和資料雙向綁定方式,也就是 scope.row.*
- 通過:label=“item.propName”取得tableColumnList中的propName，也就是表頭每一列的名字；
- 通過:property=“item.prop”取得tableColumnList中對象的prop，也就是背景實體類中的屬性名，
- 通過 ** scope.row[scope.column.property]** 來擷取每一個屬性對應的資料，scope.column.property中的property取的就是:property=“item.prop”中的值；