当前位置：首页 > news >正文

爬闪数媒网站建设/哪里搜索引擎优化好

news 2025/8/21 8:26:03

爬闪数媒网站建设,哪里搜索引擎优化好,做网站多少钱_西宁君博领衔,创建网站element-ui多级表头官网是这样写的https://element.eleme.cn/#/zh-CN/component/table 我们看到这是已知一级和二级表头是那几个字段然后拼起来的。如果表头信息是接口动态给的，根据传参每次都是不一样的。这样官网的这个例子根据没办法实现。就像上面这样的表格数…

element-ui多级表头官网是这样写的https://element.eleme.cn/#/zh-CN/component/table

我们看到这是已知一级和二级表头是那几个字段然后拼起来的。如果表头信息是接口动态给的，根据传参每次都是不一样的。这样官网的这个例子根据没办法实现。

就像上面这样的表格数据。他的表头是两级的。表头和数据都是接口给我的。

上面是接口传来的数据。titledata是表头的数据。children如果长度大于0.children就是他的2级表头。tablebase是表格内容。表头的value值对应表格数据的键值。

如果tablebase作为表格一级表头的表格。键是表头，那么我们即使不知道长度也可以通过循环来写的。参考这篇文章https://blog.csdn.net/qq_33769914/article/details/106547680。

但是此时我们都是动态的还是关联的怎么办呢。开始我用的原生的tr来写表头。在用上面链接方法写表格内容。但是这相当于是两个部分。因为不能修改tr的宽度，所以导致根本对不整齐。下面内容过长出现滚动条，上面的表头却是挤着硬在一行内撑的换行。

然后我发现了我们可以用组件。把el-table和el-table-column分开来写

父页面table.vue

<template>
<div>
    <my-table :titledata="titledata"
      :tabledata="tabledata">
    </my-table>
</div>
</template>

<script>
import MyTable from './MyTable'
export default {
components: {
    MyTable
},
data() {
    return {
      titledata: [//表头信息
        {
          values: 'date',
          label: '日期'
        },
        {
          values: '配送信息',
          children: [
            {
              values: 'name',
              label: '姓名'
            },
            {
              values: '地址',
              children: [
                {
                  values: 'province',
                  label: '省份'
                },
                {
                  values: 'city',
                  label: '市区'
                },
                {
                  values: 'address',
                  label: '地址'
                }
              ]
            }
          ]
        }
      ],
      tabledata: [//表格内容
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }
      ]
    }
}
}
</script>
<style>
</style>

可以看到上面的页面使用了组件MyTable。下面我们来写MyTable.vue

<template>
<div class="my-table">
    <el-table :data="tabledata">
      <my-column v-for="(item,index) in titledata" :key="index" :titledata="item"></my-column>
    </el-table>
</div>
</template>

<script>
import MyColumn from './MyColumn'
export default {
components: {
    MyColumn
},
props: {
    titledata: {
      type: Array
    },
    tabledata: {
      type: Array
    }
}
}
</script>
<style scoped>
</style>