vue+element ui左侧两列固定，其余列不固定，最左侧固定列可展开，除左侧固定列内容外，其余数据非零可点击展示详情页。
之前没做过这种，记录一下。

<template>
  <section >
    <div>
      <template>
        <!--0.点击展开详见element ui官网-->
        <!--当row中包含children字段时，被视为树型数据。渲染树型数据时，必须要指定row-key。children可以通过tree-props配置。-->
        <el-table :data="tableData" row-key="id" :tree-props="{children:'children'}">
         <!--1.固定列1-->
          <el-table-column label="固定列1" prop="" >
            <!--1.1由于固定列是可以点击展开的，会显示可下拉的数据，以及下拉之后显示的数据。在这里使用template-->
            <template slot-scope="scope">
              <!--1.2使用v-if以及v-else-if来进行判断是否有下拉的数据-->
              <span v-if="scope.column.label=='固定列1'&&scope.row.children!=null">{{利用scope显示相关信息}}</span>
              <span v-else-if="scope.column.label=='固定列1'&&scope.row.children==null">{{利用scope显示相关信息}}</span>
            </template>
          </el-table-column>
          <!--2.固定列2-->
          <!--2.1本列没有点击展开功能，就是普通的列-->
          <el-table-column label="固定列2" prop=""></el-table-column>
          <!--3.不固定列-->
          <!--3.1由于不知道要显示的列有多少，这里用了一个循环来显示-->
          <el-table-column v-for="(item,index) in unfixedColumns" :key="index" :label="item.label" 
          :property="item.property" align="center">
            <template slot-scope="scope">
              <!--3.2在这里判断为零的，直接展示-->
              <span v-if="scope.row[scope.column.property]==0">{{利用scope显示相关信息}}</span>
              <!--3.2其余不为零的数据，设置成可点击的，添加一个点击方法，并给方法传参-->
              <span v-else>
                <el-button type="text" @click="showDetail(scope.column,scope.row)"
                >{{利用scope显示相关信息}}</el-button>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </template>
</div> 
      <!--4.点击后展示的详情页-->
      <!--4.1点击事件返回数据成功后，dialogVisble的值为true，会显示el-dialog-->
      <!--写什么你可以自己决定，详细可参考elenment ui官网-->
      <el-dialog title="数据详情" :visible.sync="dialogVisible">
      <el-table>
        <el-table-column></el-table-column>
      </el-table>
     </el-dialog>
  </section>
</template>
<script>
//本文需要后台返回的数据格式如下，id不可重复
//如用另一种数据格式，详见element ui官网
        tableData: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },{
        id: 2,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [{
              id: 21,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 22,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
          }]
        }, {
          id: 3,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
  methods: {
    //点击显示详情
    showDetail(column, row) {
      //可以做一些判断，对参数进行修改值之类的操作
      if(){}else{}
      //然后把dialogVisble设置为true，显示在页面中
      this.dialogVisible= true;
      //通过后台的接口，前端传过去的参数，以及数据格式
      axios.post(接口,参数, {headers: { "Content-Type": "application/json" }})
      //如果都没有问题，会有返回值。可以输出res，看看需要哪些值。
        .then(res => {})
        //也可能会有报错
        .catch(res => {
        });
    },
    //这是整理不固定列数据的方法，可以在created里面调用
    getFields() {
      const unfixedColumns= [];
      //根据后台给的数据获取到列的数组（自行根据数据进行操作，以下不作为标准）
      this.fields = Object.keys(this.tableData[0]);
      //把需要显示的不固定列筛选出来
      this.fields.forEach((dataInfo,index) => {  
        if (dataInfo == "固定列1"  ||dataInfo == "固定列2"||dataInfo == "useless") {// 过滤掉固定表头及无需显示得数据
          return;
        } else {
          unfixedColumns.push({ label: dataInfo, property: dataInfo }); // 动态表头
        }
      });
      this.unfixedColumns= unfixedColumns; 
    }
  },
};
</script>

如有问题，欢迎指正，非常感谢。