element-ui动态切换表头以及表格里的内容

原创已于 2024-05-28 16:24:54 修改

· 1k 阅读

1 ·

版权

文章标签：

#vue.js #javascript

于 2021-08-18 14:26:45 首次发布

本文介绍了如何在Vue.js项目中利用Element UI实现动态表头切换和内容切换。通过在el-table-column中循环并设置label和property参数，配合相应的JSON配置，可以完成动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前两天因为业务需要需要做动态的表头切换和动态的切换内容，找了找资料后实现了这一效果

因为是活得所以需要在table里面循环el-table-column这个代码并且给他加上你所需的参数如lable以及property这两个比较重要的参数下面是table的配置代码以及你所需要的json也要进行相对应的改变

<el-table

                @cell-click="okdd"

                class="tableX"

                height="150"

                :data="tableData.data"

                :row-class-name="ddddddd"

    style="width: 100%; margin-top: 10px"

              >

                <el-table-column

                  min-width="50"

                  v-for="item in tableData.title"

                  :key="item.key"

                  :property="item.key"

                  :label="item.lable"

                  :show-overflow-tooltip="true"

                >

                  <template slot-scope="scope">

                    <span :class="scope.row[scope.column.property]=='异常'?'redback':''">{{ scope.row[scope.column.property] }}</span>

                  </template>

                </el-table-column>

              </el-table>

这里是表头的json配置注意这里需要和你的数据的名称需要一致哦

"title": [
      {
        "lable": "设备类型名称",
        "key": "sblxmc"
      },
      {
        "lable": "设备名称",
        "key": "sbmc"
        
      },
      {
        "lable": "设备型号",
        "key": "sbxh"
      },
      {
        "lable": "电压等级",
        "key": "dydj"
      },
      {
        "lable": "所属单元间隔",
        "key": "ssdyg"
      },
      {
        "lable": "SF6气体额定压力",
        "key": "sfqtedyl"
      },
      {
        "lable": "告警状态",
        "key": "gjzt"
      },
      {
        "lable": "告警时间",
        "key": "gjsj"
        
      },
      {
        "lable": "告警原因",
        "key": "gjyy"
      },
      {
        "lable": "造成的影响",
        "key": "zcyx"
      }
    ]

这里的部分就是数据的json格式了跟一般的json几乎无差距

"data": [
      {
        "sblxmc": "组合电器",
        "sbmc": "5051组合电器",
        "sbxh": "ZHW-550",
        "dydj": "交流500kV",
        "ssdyg": "5051断路器间隔",
        "sfqtedyl": "0.60Mpa",
        "gjzt": "异常",
        "gjsj": "2021/8/16 11:25",
        "gjyy": "低温，SF6气体液化，压力闭锁",
        "zcyx": "存在断路器无法开断的风险"
      },
      {
        "sblxmc": "组合电器",
        "sbmc": "5052开关",
        "sbxh": "ZHW-550",
        "dydj": "交流500kV",
        "ssdyg": "5051断路器间隔",
        "sfqtedyl": "0.60Mpa",
        "gjzt": "异常",
        "gjsj": "2021/8/16 11:25",
        "gjyy": "低温，SF6气体液化，压力闭锁",
        "zcyx": "存在断路器无法开断的风险"
      }
    ],