el-table动态表头

1.html内容

1.:data=“tableData” 属性绑定表格内容数据，使用 el-table-column 组件来动态渲染每一列。v-for 指令用于遍历 searchTypeOptions 数组，为每个头部信息创建对应的列。
2.template slot="header" 这个用来更改某个表头信息，el-tooltip是对表头进行提示；
3.如果对于表单中的某个值有操作，可以在<template slot-scope="scope">操作；

    <el-table ref="multipleTable" v-loading="loading" style="width: 100%" :data="tableData" row-key="id" element-loading-text="拼命加载中" @selection-change="handleDataFormChange">
    <el-table-column align="center" :prop="item.value" v-for="item in searchTypeOptions" :key="item.value">
        <template slot="header">
          <span class="red">{{item.value == 'tel' ? '*' : ''}}</span> {{item.label}}
          <el-tooltip v-if="item.value == 'tel'" content="这个是手机号码" placement="top">
            <i class="el-icon-question" />
           /el-tooltip>
        </template>
        <template slot-scope="scope">
          <div v-if="item.value=='name'" class="clickCount" @click="importExportList(scope.row)">
            {{scope.row[item.value]}}
          </div>
          <div v-else>
            {{scope.row[item.value]}}
          </div>                  
        </template>
      </el-table-column>
      <!--这里可以单独在后面加上列-->
       <el-table-column prop="operation" label="操作" header-align="center" align="center" width="250">
        <template slot-scope="scope">
          <el-button class="table-btn"  @click="handleUpdate('del', scope.row, scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </table>

2.data数据

表格内容数据的键值需要跟表头里面的value值保持一致；

searchTypeOptions:[
    {
    label:'手机号'，
    value:tel
    },
     {
    label:'姓名'，
    value:name
    },
    {
      label:'备注'，
       value:msg
   }
],
tableData:[
    {
        name:'web-vivi',
        tel:'158888888888',
        msg:'这是备注'
    }
]