element-ui v-for循环表格-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui v-for循环表格。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

再某种情况下我们会有这样一个需求一个页面有多个弹窗表格但是又不能重复写多个表格写多个会显得我们的代码难以维护

以下我封装了一个表格上代码：

<template>
  <el-dialog
    class="dialog-box"
    :visible.sync="visible"
    width="40%"
    center
    :show-close="false"
    :close-on-press-escape="false"
    :append-to-body="true">
    <!-- 头部 -->
      <div class="header-box" slot="title">历史警报</div>
      <!-- 表格 -->
      <el-table
        class="table"
        :data="list"
        :header-cell-style="tableHederStyle"
        :row-style="tableRowStyle"
        style="width: 100%"
        max-height="250px"
        >
        <el-table-column v-for="(item) in listTitle" :key="item.id" :label="item.label" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span :style="{'color':item.colorStyle}">{{scope.row[item.prop]}}</span>
          </template>
        </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>

export default {
  props: {
    // data有详细说明
    // listTitle: {
    //   type: Array,
    //   default: () =>{
    //     return []
    //   }
    // }
  },

  data () {
    return {
      visible: false,
      id: '',
      list: [{
        id: 1,
        neicun: '80%(状态异常)',
        cpu: '50%',
        yuanyin: '内存损坏安装系统提示解压缩文件出错',
        yingpan: '50%',
        date: '2021/09/21 18:19:20'
      },
      {
        id: 2,
        neicun: '80%(状态异常)',
        cpu: '50%',
        yuanyin: '内存损坏安装系统提示解压缩文件出错',
        yingpan: '50%',
        date: '2021/09/21 18:19:20'
      },
      {
        id: 3,
        neicun: '80%(状态异常)',
        cpu: '50%',
        yuanyin: '内存损坏安装系统提示解压缩文件出错',
        yingpan: '50%',
        date: '2021/09/21 18:19:20'
      },
      {
        id: 4,
        neicun: '80%(状态异常)',
        cpu: '50%',
        yuanyin: '内存损坏安装系统提示解压缩文件出错',
        yingpan: '50%',
        date: '2021/09/21 18:19:20'
      },
      {
        id: 5,
        neicun: '80%(状态异常)',
        cpu: '50%',
        yuanyin: '内存损坏安装系统提示解压缩文件出错',
        yingpan: '50%',
        date: '2021/09/21 18:19:20'
      }],
      listTitle: [{ // 对象的顺序决定table call的顺序 每个都是必传
        prop: 'cpu', // 对应element ui 表格的prop属性
        label: 'CPU', // 对应element ui 表格的label属性
        colorStyle: '#049998' // 动态设置文字的颜色
      },
      {
        prop: 'neicun',
        label: '内存',
        colorStyle: '#9F322F'
      },
      {
        prop: 'yingpan',
        label: '硬盘',
        colorStyle: '#049998'
      },
      {
        prop: 'yuanyin',
        label: '报警原因',
        colorStyle: '#9F322F'
      },
      {
        prop: 'date',
        label: '时间',
        colorStyle: '#049998'
      }],
      tableHederStyle: {
        'background-color': '#122E76',
        'color': '#C5C9D8'
      },
      tableRowStyle: {
        'background-color': '#102052',
      }
    }
  },
  methods: {
    init(id) {
      this.visible = true
    },
  }
}
</script>

<!-- 这里的className外部绝对不要和这里重复 -->
<style lang="scss">
.dialog-box {
    .el-dialog {
      height: 346px;
      background: #102052 url('~@/assets/monitor/horn2.png') no-repeat 100%/cover;
    }
    .el-dialog__header {
      padding-top: 5px;
      margin-top: 32vh !important;
    }
    .header-box {
      width: 100%;
      height: 45px;
      position: relative;
      line-height: 45px;
      color: #47AAE1;
      font-size: 20px;
      font-weight: bold;
      background: url('~@/assets/monitor/layer3.1.png') no-repeat 100%/cover;
      background-position-x: center;
      &::before,&::after {
        content: '';
        display: inline-block;
        width: 58px;
        height: 14px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      &::before {
        left: 260px;
        background: url('~@/assets/monitor/group134.png') no-repeat 100%/cover;
      }
      &::after {
        right: 260px;
        background: url('~@/assets/monitor/group134x.png') no-repeat 100%/cover;
      }
    }
    .el-table__body-wrapper {
      background-color: #102052;
    }
    .el-table {
      th {
        background-color: #122E76;
      }
      &::before {
        background-color: #133163 !important;
      }
      .el-table__empty-block {
        background-color: #102052;
      }
    }
    .el-table th,td {
      border-bottom: 1px solid #133163 !important;
    }
  }
</style>

样式什么的可以忽略直接cv即刻使用主要靠父亲传一个数组来控制表头显示什么以及他的值

样式用不到可以删除

效果： element v-for,ui,elementui,vue.js 文章来源地址https://www.toymoban.com/news/detail-526021.html