ElementUI Table 动态表头，动态数据，动态列

表格显示的列不确定的时候就需要使用动态的方式，而不是预先绑定好。

前端的实现

数据源

对于前端来说数据源和前面的一样，没什么区别，反正就是提供一下数据

const data = [
  {
    name: 'John Doe',
    age: 30,
    city: 'New York'
  },
  {
    name: 'Jane Smith',
    age: 25,
    city: 'London'
  },
  {
    name: 'Michael Jones',
    age: 40,
    city: 'Paris'
  }
];

动态表头

表头就不能写死了，需要绑定的来,相当于列就是动态的显示的，不是预先绑定好的

const columns = [
  {
    prop: 'name',
    label: '姓名'
  },
  {
    prop: 'age',
    label: '年龄'
  },
  {
    prop: 'city',
    label: '城市'
  }
];

然后这样绑定上去就可以动态的渲染出来表头了

<el-table :data="data" :columns="columns"></el-table>

上面那个不好写一些额外的列，比如还有一些固定的列和编辑列这种，所以可以把需要动态显示的列循环出来

<el-table :data="state.tableData" v-loading="state.tableLoading"
    :header-cell-style="{ background: '#f8f8f9' }" style="width: 100%;margin-top:-10px">
    <el-table-column prop="className" label="班级" show-overflow-tooltip min-width="219" />
    <el-table-column prop="studentCount" sortable label="学生数" align="center" min-width="119" />       
    <!-- 循环出来需要动态显示的列 -->
    <el-table-column :label="item.label" min-width="139" :prop="item.prop" v-bind:key="index" v-for="(item, index) in state.dynamicColumns">
    </el-table-column>
    <el-table-column header-align="center" align="center" label="操作" width="90px" fixed="right">
        <template #default="scope">
            <el-link :underline="false" @click="showDetails(scope.row)" type="primary">详情</el-link>
        </template>
    </el-table-column>
</el-table>

后端的实现

需要提供动态的数据源和动态的表头，c# 可以使用ExpandoObject 构建动态类型

后台需要的相关实体

动态表头需要的实体

public class ElementTableColumn
{
    public string prop { get; set; }
    public string label { get; set; }
}

接口需要返回的实体

public class ElementTableDynamic
{
    /// <summary>
    /// 动态表头
    /// </summary>
    public List<ElementTableColumn> Columns { get; set; }
    /// <summary>
    /// 动态数据
    /// </summary>
    public List<ExpandoObject> Data { get; set; }
}

动态构建数据的逻辑

这里主要贴的是动态构建数据的逻辑，具体的业务逻辑需要换成自己的

public ElementTableDynamic ClassMonthTaskReport(ClassStatisticsParams _params)
{
    // 这里边是需要显示动态数据的
    List<Tasks> tasks = BaseDal.Db.Queryable<Tasks>().OrderBy(a => a.OrderNum).OrderBy(a => a.CreateTime).Take(_params.TakeCount).ToList();
    // 其他逻辑.....
    // 构建动态的表头
    List<ElementTableColumn> elementTableColumns = new List<ElementTableColumn>();
    foreach (Tasks taskItem in tasks)
    {
        ElementTableColumn elementTableColumn = new ElementTableColumn();
        // elementTableColumn.label = taskItem.TaskName;
        // 列名显示这个短名称吧
        elementTableColumn.label = taskItem.ReportName;
        // 动态列名，用id来拼一个名称，显示的可能会随时调整（当然也可以在数据库单独创建一列来存储一个列名，反正列都是动态的一般来说都没必要）
        elementTableColumn.prop = "completeShow" + taskItem.ID;
        elementTableColumns.Add(elementTableColumn);
    }
    List<ExpandoObject> expandoObjectList = new List<ExpandoObject>();
    // 构建动态数据
    foreach (VClassTeam item in vClassTeams)
    {
        //创建动态类型。表格这些需要动态显示
        dynamic expandoObjectItem = new ExpandoObject();
        // 转化成键值对方便动态赋值，这样给键值对赋值就会自动给expandoObjectItem赋值
        var expandoDict = (IDictionary<string, object>)expandoObjectItem;
        // 固定列的数据
        expandoDict["levelID"] = item.LevelID;
        expandoDict["gradeID"] = item.GradeID;
        expandoDict["classId"] = item.ID;
        expandoDict["className"] = item.ClassName;
        expandoDict["studentCount"] = studentClassList.Count(a => a.ClassID == item.ID);
        // 动态数据赋值
        foreach (Tasks taskItem in tasks)
        {
           List<StuTaskDetail> stuTaskDetail_Item = stuTaskDetails.Where(a => a.ClassId == item.ID && a.TaskID == taskItem.ID).ToList();
           // 给需要动态显示的列提供值（具体提供值的算法根据自己的业务逻辑来）
           expandoDict["completeShow" + taskItem.ID] = stuTaskDetail_Item.GroupBy(a => a.ClassId).Count() + "/" + stuTaskDetail_Item.Count();  
        }
        expandoObjectList.Add(expandoObjectItem);
    }
    ElementTableDynamic elementTableDynamic = new ElementTableDynamic();
    elementTableDynamic.Columns = elementTableColumns;
    elementTableDynamic.Data = expandoObjectList;
    return elementTableDynamic;
}

接口返回的数据格式如下

前端需要复杂一些的模板解析

当数据不是简单的直接绑定一个列的时候，比如需要点击查询详情等，还需要提供详情的数据

比如前端需要这样绑定数据

<el-table-column prop="managerOfficeMeetingCount" align="center" label="总经办会议" min-width="109">
    <template #default="scope">
        <span class="canclick"
            @click="showMonthDetails(scope.row.managerOfficeMeetingDetails, '总经办会议', scope.row.managerOfficeMeetingCount)">{{
                scope.row.managerOfficeMeetingShow }}</span>
    </template>
</el-table-column>

后端

这样后端就还需要多提供几个数据，详情数据：managerOfficeMeetingDetails，条数：managerOfficeMeetingCount 等，后台大概的核心代码如下：

// 动态数据赋值
foreach (Tasks taskItem in tasks)
{
    List<StuTaskDetail> stuTaskDetail_Item = stuTaskDetails.Where(a => a.ClassId == item.ID && a.TaskID == taskItem.ID).ToList();
    // 给需要动态显示的列提供值（具体提供值的算法根据自己的业务逻辑来）
    expandoDict["completeShow" + taskItem.ID] = stuTaskDetail_Item.GroupBy(a => a.ClassId).Count() + "/" + stuTaskDetail_Item.Count();  
    expandoDict["completeCount" + taskItem.ID] = groupTasks_Item.GroupBy(a => a.ClassID).Count();
    expandoDict["completeDetails" + taskItem.ID] = ProcGroupTasksDetails(item, schoolClassDtos, groupTasks_Item);
}

动态构建表头的时候就在加一个字段，方便前端解析的时候去取对应的数据

// 构建动态的表头与属性对应的数据
List<ElementTableColumn> elementTableColumns = new List<ElementTableColumn>();
foreach (Tasks taskItem in tasks)
{
    ElementTableColumn elementTableColumn = new ElementTableColumn();
    elementTableColumn.label = taskItem.ReportName;
    elementTableColumn.prop = "completeShow" + taskItem.ID;
    // 多加一个字段，方便前端解析的时候去取
    elementTableColumn.taskId = taskItem.ID+"";
    elementTableColumns.Add(elementTableColumn);
}

这样修改后，后端返回的数据结构如下：

表头的数据结构：

具体数据的结构：

前端

这种情况下详情数据前端解析的时候也要动态的来了，不能写死,要根据那个动态id来拼接出来取数据

<!-- 循环出来需要动态显示的列 -->
<el-table-column :label="item.label" min-width="139" align="center" :prop="item.prop" v-bind:key="index"
    v-for="(item, index) in state.dynamicColumns">
    <template #default="scope">
        <span class="canclick"
            @click="showMonthDetails(scope.row['completeDetails'+item.taskId], item.label,scope.row['completeCount'+item.taskId])">{{
                scope.row[item.prop]
            }}</span>
    </template>
</el-table-column>

需要多级表头，合并表头的

效果如下：

element ui的多级表头格式如下,相当于就是有嵌套效果的

<el-table-column label="地址">
   <el-table-column
          prop="province"
          label="省份"
          width="120">
   </el-table-column>
    <el-table-column
          prop="city"
          label="市区"
          width="120">
   </el-table-column>
</el-table-column>

后台表头的结构就需要变一下了，需要有一个子级

public class ElementTableColumn
{
    public string prop { get; set; }
    public string label { get; set; }
    public string taskId { get; set; }
    /// <summary>
    /// 可能有多级表头的情况
    /// </summary>
    public List<ElementTableColumn> subTableColumn { get; set; }
}

需要有子级的情况，后台构建的时候就要多添加一级

// 构建动态的表头与属性对应的数据
List<ElementTableColumn> elementTableColumns = new List<ElementTableColumn>();
foreach (Tasks taskItem in tasks)
{
    // 班级数量和具体的完成数量还要合并成一个单元来显示
    ElementTableColumn elementTableColumnFather = new ElementTableColumn();
    elementTableColumnFather.label = taskItem.ReportName;
    List<ElementTableColumn> subTableColumn = new List<ElementTableColumn>();
    // 2024-5-29，说某个任务完成的班级数量单独作为一列显示出来，那么在加一列吧，放到那个显示的数据列前面
    ElementTableColumn classCompleteCountTableColumn = new ElementTableColumn();
    classCompleteCountTableColumn.label = "班级数";
    classCompleteCountTableColumn.prop = "classCompleteCount" + taskItem.ID;
    classCompleteCountTableColumn.taskId = taskItem.ID + "";
    subTableColumn.Add(classCompleteCountTableColumn);
    ElementTableColumn elementTableColumn = new ElementTableColumn();
    elementTableColumn.label = "完成次数";
    // 动态列名，用id来拼一个名称，显示的可能会随时调整
    elementTableColumn.prop = "completeShow" + taskItem.ID;
    elementTableColumn.taskId = taskItem.ID + "";
    subTableColumn.Add(elementTableColumn);
    elementTableColumnFather.subTableColumn = subTableColumn;
    elementTableColumns.Add(elementTableColumnFather);
}

前台解析的时候多加一级循环即可

<!-- 循环出来需要动态显示的列,需要合并一级的单元格 -->
<el-table-column :label="fatheritem.label" align="center" v-for="(fatheritem, index) in state.dynamicColumns" :key="index">
    <el-table-column :label="item.label" min-width="139" align="center" :prop="item.prop"
        v-bind:key="index" v-for="(item, index) in fatheritem.subTableColumn">
        <template #default="scope">
            <span class="canclick"
                @click="showMonthDetails(scope.row['completeDetails' + item.taskId], item.label, scope.row['completeCount' + item.taskId])">{{
                    scope.row[item.prop]
                }}</span>
        </template>
    </el-table-column>
</el-table-column>

动态表头返回的数据结构的一部分如下