一、效果

1.初始化有4个字段（列）

2.用CheckBox或者按钮等触发事件，改变列

二、需求

2.1 因为客户要按照不同的分组进行统计金额数据，展示的列会改变，因此sql语句要改为动态执行，定义变量去控制SELECT和GROUP BY 的字段,同时前端页面要调整展示的字段

默认按照样品大类/亚类进行分组，当勾选领域/检验性质时，sql查询的字段要将对应字段添加进去

// 默认
SELECT 样品大类,亚类,SUM(金额) from 表 GROUP BY 样品大类,样品亚类
// 勾选领域
SELECT 领域,样品大类,样品亚类,SUM(金额) from 表 GROUP BY 领域,样品大类,样品亚类
// 勾选检验性质
SELECT 检验性质,样品大类,样品亚类,SUM(金额) from 表 GROUP BY 检验性质,样品大类,样品亚类
// 勾选领域和检验性质
SELECT 领域,检验性质,样品大类,样品亚类,SUM(金额) from 表 GROUP BY 领域,检验性质,样品大类,样品亚类

2.2 定义变量去控制SELECT和GROUP BY 的字段，改为动态sql语句

// trField为字段变量   groupby为group by分组变量
SELECT  {strField} 
	样品大类, 样品亚类, SUM(F_Amt) AS F_Amt  FROM   [Order] o INNER JOIN OrderSample os  ON o.F_OrderNo = os.F_OrderNo
      {groupby}

三、代码

1.table: v-for要展示的列（页面初始的字段） v-if 判定是否展示列

<el-table ref="tableSample" id="tableSample" :data="tableDataSample" style="width: 100%" height="100% " border size="small">
     <template v-if="cell.show" v-for="(cell,index) in tableCellSampleArr"></template>
 </el-table>

2.页面初始列设置: v-for绑定的数组

tableCellSampleArr: [
     { label: '样品大类', name: "F_SampleKindName1", width: 180, show: true },
     { label: '样品亚类', name: "F_SampleKindName2", width: 180, show: true },
     { label: '应收款', name: "F_Amt", width: 100, show: true },
     { label: '已收款', name: "F_ReceiveAmt", width: 100, show: true }
                ]

3.当选择CheckBox或者按钮触发动态显示列时

// 参数val为true时，将要显示的列添加进初始化的数组中，val为false时，将列从数组中移除
 columnChange(val) {
   if (val) {
        this.tableCellSampleArr.unshift({ label: '领域', name: "F_UseBranchNo", width: 80, show: true })
      } else {
        this.tableCellSampleArr.forEach(function (item, index) {
            if (item.label == "领域") {
                 this.tableCellSampleArr.splice(index, 1)
             }
       })   
     }
}