vue3 使用elementUI饿了么el-table组件 动态循环自定义表头列数据

 在vue3上使用el-table组件自定义循环表头列；

<el-table :data="list" v-loading="loading" border>

            <!-- @selection-change="handleSelectionChange" -->

            <!-- <el-table-column type="selection" width="55" align="center" /> -->

            <el-table-column label="编号" align="center" prop="rowIndex" width="70"/>

            <el-table-column label="单位" align="center" prop="userName" :show-overflow-tooltip="true"/>

            <el-table-column label="车队" align="center" prop="userName" :show-overflow-tooltip="true"/>

            <el-table-column label="统计时间段" align="center" prop="userName" :show-overflow-tooltip="true"/>

            <el-table-column label="司机名称" align="center" prop="userName" :show-overflow-tooltip="true"/>

            <el-table-column label="车牌号" align="center" prop="userName" :show-overflow-tooltip="true"/>

            <el-table-column label="司机资格证号" align="center" prop="userName" :show-overflow-tooltip="true"/>

            <!-- 自定义动态表格 取第一个数据循环自定义表头数据-->

            <el-table-column

              v-for="(item,index) in list[0].tel"

              :key="index"

              :label="item.name"

              align="center"

              show-overflow-tooltip

            >

                <el-table-column label="总数" align="center" :show-overflow-tooltip="true"><!-- 自定义第二层表头-->

                    <template #default="scope">

                        <span>{{ scope.row.tel[index].totle }}</span><!-- 自定义第二层表格数据-->

                    </template>

                </el-table-column>

                <el-table-column label="有效" align="center" :show-overflow-tooltip="true"><!-- 自定义第二层表头-->

                    <template #default="scope">

                        <span>{{ scope.row.tel[index].xtotle }}</span><!-- 自定义第二层表格数据-->

                    </template>

                </el-table-column>

            </el-table-column>

            <el-table-column label="异常次数总计" align="center" >

              <el-table-column label="总数" align="center" prop="aebsMaxTime" :show-overflow-tooltip="true"/>

              <el-table-column label="有效" align="center" prop="aebsMaxCount" :show-overflow-tooltip="true"/>

            </el-table-column>

        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />

 

 

<script setup >

// 遮罩层

const loading = ref(true)

// 总条数

const total = ref(0)

 

// 表格数据

const list = ref([{rowIndex:1,userName:"测试",tel:[{name:"疲劳驾驶12",totle:100,xtotle:90},{name:"区域超速",totle:120,xtotle:80},{name:"区域超速3",totle:120,xtotle:80}]},

{rowIndex:2,userName:"测试",tel:[{name:"疲劳驾驶12",totle:90,xtotle:91},{name:"区域超速",totle:85,xtotle:86},{name:"区域超速3",totle:120,xtotle:80}]},

{rowIndex:3,userName:"测试",tel:[{name:"疲劳驾驶12",totle:3,xtotle:31},{name:"区域超速",totle:3.1,xtotle:3.2},{name:"区域超速3",totle:120,xtotle:80}]},

{rowIndex:3,userName:"测试",tel:[{name:"疲劳驾驶12",totle:4,xtotle:41},{name:"区域超速",totle:4.1,xtotle:4.2},{name:"区域超速3",totle:120,xtotle:80}]}])

 

const state = reactive({

    // 表单参数

    form: {},

    queryParams: {

        pageNum: 1,

        pageSize: 20,

        userName: undefined,

  },

})

const { form,queryParams} = toRefs(state)

 

/** 查询分页列表 */

function getList() {

  loading.value = true

//   getinfolist(queryParams.value).then((response) => {

 //   loading.value = false

//     if (response.code == 200) {

//       list.value = response.data.result

//       total.value = response.data.totalNum

//     } else {

//       total.value = 0

//       list.value = []

//     }

//   })

}

</script>

 

具体效果显示：