自定义生成表格（自定义表头，侧边列）

最新推荐文章于 2023-09-22 11:54:34 发布

一只前端小菜鸡.

最新推荐文章于 2023-09-22 11:54:34 发布

阅读量333

点赞数

文章标签：数据结构前端 javascript html5 vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_49826079/article/details/129158299

版权

文章展示了如何在Vue.js中利用ElementUI库创建自定义表头，通过插槽动态设置列内容，并根据数据类型应用不同颜色。表格的每一列都包含根据条件显示的内容，如模型数量和特征等，数据由后端返回，支持多种维度展示。

摘要由CSDN通过智能技术生成

根据需求要生成自定义表头，列，且每列里所放置的内容同类别的还要有相同的颜色

根据要求分析：

表头第一列第一行为空，我们只需设置lable=“”即可，第二行第三行要使用v-if来判断他每行要显示的名称。

每一列的列名以及下面每行要显示的东西，要使用到插槽，分别来判断他们归属于第二行还是第三行的内容。

html代码片段：

 <el-table :data="tableData66" border style="width: 100%" :header-cell-style="{background:'#F5F7FA',color:'#606266'}">
        <el-table-column
          label=""
        >
          <template slot-scope="scope">
            <div v-if="scope.row.type == 'num'" class="scopenum">
              <span>模型数量</span>
              <span>（ <b style="color:green">已展示</b> | <b style="color:blue">已启用未展示</b> | <b>总数</b>）</span>
            </div>
            <div v-else class="scopenum">
              <span>模型保护的特征</span>
              <span>（ <b style="color:green">已展示</b> | <b style="color:blue">已启用未展示</b> | <b>未启用</b>）</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="维度一"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.type == 'num'" class="scopenumtz">
              <span><b style="color:green">{{ scope.row.wd1.qy }}</b> | <b style="color:blue">{{ scope.row.wd1.zs }}</b> | <b>{{ scope.row.wd1.z1 }}</b></span>
            </div>
            <div v-else class="scopenum">
              <span v-for="(item,index) in scope.row.wd1.qy" :key="index.id"><b style="color:green">{{ item.title }}</b></span>
              <span v-for="(item,index) in scope.row.wd1.zs" :key="index.id"><b style="color:blue">{{ item.title }} </b></span>
              <span v-for="(item,index) in scope.row.wd1.z1" :key="index.id"><b>{{ item.title }}</b></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label="维度二"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.type == 'num'" class="scopenumtz">
              <span><b style="color:green">{{ scope.row.wd2.qy }}</b> | <b style="color:blue">{{ scope.row.wd2.zs }}</b> | <b>{{ scope.row.wd2.z1 }}</b></span>
            </div>
            <div v-else class="scopenum">
              <span v-for="(item,index) in scope.row.wd2.qy" :key="index.id"><b style="color:green">{{ item.title }}</b></span>
              <span v-for="(item,index) in scope.row.wd2.zs" :key="index.id"><b style="color:blue">{{ item.title }} </b></span>
              <span v-for="(item,index) in scope.row.wd2.z1" :key="index.id"><b>{{ item.title }}</b></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="维度三"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.type == 'num'" class="scopenumtz">
              <span><b style="color:green">{{ scope.row.wd3.qy }}</b> | <b style="color:blue">{{ scope.row.wd3.zs }}</b> | <b>{{ scope.row.wd3.z1 }}</b></span>
            </div>
            <div v-else class="scopenum">
              <span v-for="(item,index) in scope.row.wd3.qy" :key="index.id"><b style="color:green">{{ item.title }}</b></span>
              <span v-for="(item,index) in scope.row.wd3.zs" :key="index.id"><b style="color:blue">{{ item.title }} </b></span>
              <span v-for="(item,index) in scope.row.wd3.z1" :key="index.id"><b>{{ item.title }}</b></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="维度四"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.type == 'num'" class="scopenumtz">
              <span><b style="color:green">{{ scope.row.wd4.qy }}</b> | <b style="color:blue">{{ scope.row.wd4.zs }}</b> | <b>{{ scope.row.wd4.z1 }}</b></span>
            </div>
            <div v-else class="scopenum">
              <span v-for="(item,index) in scope.row.wd4.qy" :key="index.id"><b style="color:green">{{ item.title }}</b></span>
              <span v-for="(item,index) in scope.row.wd4.zs" :key="index.id"><b style="color:blue">{{ item.title }}</b></span>
              <span v-for="(item,index) in scope.row.wd4.z1" :key="index.id"><b>{{ item.title }}</b></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="维度五"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.type == 'num'" class="scopenumtz">
              <span><b style="color:green">{{ scope.row.wd5.qy }}</b> | <b style="color:blue">{{ scope.row.wd5.zs }}</b> | <b>{{ scope.row.wd5.z1 }}</b></span>
            </div>
            <div v-else class="scopenum">
              <span v-for="(item,index) in scope.row.wd5.qy" :key="index.id"><b style="color:green">{{ item.title }}</b></span>
              <span v-for="(item,index) in scope.row.wd5.zs" :key="index.id"><b style="color:blue">{{ item.title }} </b></span>
              <span v-for="(item,index) in scope.row.wd5.z1" :key="index.id"><b>{{ item.title }}</b></span>
            </div>
          </template>
        </el-table-column>
      </el-table>

后端返回数据：

data:[
{type: "num",
wd1: {z1: 8, qy: 5, zs: 0},
wd2: {z1: 19, qy: 9, zs: 2},
wd3: {z1: 4, qy: 3, zs: 0}
wd4: {z1: 1, qy: 0, zs: 0},
wd5: {z1: 0, qy: 0, zs: 0}
},
{type: "tz",
wd1:{
qy: 
[{title: "ESD-ua-hour"}
{title: "id-SR-hour(new)"}
{title: "uaType-uaType-hour"}
{title: "apiName-day"}
{title: "prophet-account-hour"}] 
z1:
[{title: "apiName-day-without"},
{title: "apiName-day-without"}]
zs: []
},
wd2:{
qy: 
[{title: "ESD-ua-hour"}
{title: "id-SR-hour(new)"}
{title: "uaType-uaType-hour"}
{title: "apiName-day"}
{title: "prophet-account-hour"}] 
z1:
[{title: "apiName-day-without"},
{title: "apiName-day-without"}]
zs: []
},
wd3:{
qy: 
[{title: "ESD-ua-hour"}
{title: "id-SR-hour(new)"}
{title: "uaType-uaType-hour"}
{title: "apiName-day"}
{title: "prophet-account-hour"}] 
z1:
[{title: "apiName-day-without"},
{title: "apiName-day-without"}]
zs: []
},
wd4:{
qy: 
[{title: "ESD-ua-hour"}
{title: "id-SR-hour(new)"}
{title: "uaType-uaType-hour"}
{title: "apiName-day"}
{title: "prophet-account-hour"}] 
z1:
[{title: "apiName-day-without"},
{title: "apiName-day-without"}]
zs: []
},
]
wd5:{
qy: 
[{title: "ESD-ua-hour"}
{title: "id-SR-hour(new)"}
{title: "uaType-uaType-hour"}
{title: "apiName-day"}
{title: "prophet-account-hour"}] 
z1:
[{title: "apiName-day-without"},
{title: "apiName-day-without"}]
zs: []
}
]

根据此方法便能生成自己所需表格样式