el-table循环内有插槽

最新推荐文章于 2025-05-14 19:36:51 发布

锦坤！

最新推荐文章于 2025-05-14 19:36:51 发布

阅读量1.4k

点赞数

文章标签： vue.js elementui

本文链接：https://blog.youkuaiyun.com/weixin_44042792/article/details/130147544

版权

该文章展示了一段Vue.js代码，用于创建一个数据驱动的表格，表格中包含网关IP、端口、连接时间等信息。根据`isUpGateway`属性，对说明列应用不同样式。同时，有一个操作列，显示特定按钮并触发相关操作。

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

1. html

<el-table :data="tableList" style="width: 100%" :header-cell-style="cellStyle">
      <el-table-column :label="item.label" v-for="(item, i) in headerList" :key="i">
        <template slot-scope="scope">
          <div v-if="item.prop=='remark'">
            <div v-if="scope.row.isUpGateway">{{ scope.row[item.prop] }}</div>
            <div v-else style="color: #E74E4E">{{ scope.row[item.prop] }}</div>
          </div>
          <div v-else>{{ scope.row[item.prop] }}</div>
        </template>
      </el-table-column>
      <el-table-column v-if="operate" fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <div class="btns" v-if="scope.row.isUpGateway" @click="showPop(scope.row)">{{ btn }}</div>
        </template>
      </el-table-column>
    </el-table>

2.js

 headerList: [
        {
          prop: "ip",
          label: "网关IP"
        },
        {
          prop: "port",
          label: "网关端口"
        },
        {
          prop: "connectTime",
          label: "连接时间"
        },
        {
          prop: "gatewayCode",
          label: "网关编码"
        },
        {
          prop: "heartTime",
          label: "最新心跳"
        },
        {
          prop: "remark",
          label: "说明"
          // isInput: true
        }
      ],
      tableList: [],
      tableData: [
        {
          remark: 111,
          isUpGateway:true,
          connectTime: 3
        },
        {
          remark: 111,
          isUpGateway:false,
          connectTime: 3
        },
        {
          remark: 111,
          isUpGateway:true
        }
      ]