使用elementUI饿了么框架中的el-table组件，表头动态数据处理和列表中某一项数据循环并且添加样式

使用elementUI饿了么框架中的el-table组件，表头动态数据处理和列表中某一项数据循环并且添加样式

 

<div class="panel-box">
      <div class="panel-title">已开通产品</div>
      <el-table :data="productData" stripe style="width: 100%" class="opened-product">
        <template v-for="item in productHead"> // 模板循环列表数据和表头
          <el-table-column v-if="item.label_data === 'url'" :label="item.label" :key="item.id" align="center">
            <template slot-scope="scope"> //循环列表某一项的数据
              <div class="get-url">
                <p v-for="(v,index) in scope.row.url" :key="index">
                  <el-link
                    type="primary"
                    :underline="false"
                    :href="v.link"
                    target="_blank"
                  >{{ v.link }}</el-link>
                  ({{ v.doc }}地址)
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-else-if="item.label_data === 'state'" :label="item.label" :key="item.id" align="center">
            <template slot-scope="scope"> //给列表某一项数据添加样式
              <span
                :class="{ 'danger': scope.row.state === '关闭', 'success': scope.row.state === '运行中'}"
              >{{scope.row.state}}</span>
            </template>
          </el-table-column>
          <el-table-column v-else :prop="item.label_data" :label="item.label" :key="item.id" align="center"></el-table-column>
        </template>
      </el-table>
    </div>


productHead: [
        {
          id: 0,
          label: "产品名称",
          label_data: "title"
        },
        {
          id: 1,
          label: "产品版本",
          label_data: "versions"
        },
        {
          id: 2,
          label: "访问地址",
          label_data: "url"
        },
        {
          id: 3,
          label: "开通时间",
          label_data: "start_time"
        },
        {
          id: 4,
          label: "到期时间",
          label_data: "end_time"
        },
        {
          id: 5,
          align: "center",
          label: "状态",
          label_data: "state"
        }
      ],
      productData: [
        {
          id: 0,
          title: "ele",
          versions: "PRO版(PRO版)",
          url: [
            {
              link: "http://bk.dsjakdjsadk.com",
              doc: "初始化"
            },
            {
              link: "http://bk.dsjakdjsadk.com",
              doc: "自定义"
            }
          ],
          start_time: "2018-12-20 00:00:00",
          end_time: "2020-12-20 00:00:00",
          state: "运行中"
        },
        {
          id: 1,
          title: "admin",
          versions: "PRO版本(PRO版)",
          url: [
            {
              link: "http://td.dsjakdjsadk.com",
              doc: "初始化"
            },
            {
              link: "http://td.dsjakdjsadk.com",
              doc: "自定义"
            }
          ],
          start_time: "2018-12-20 00:00:00",
          end_time: "2020-12-20 00:00:00",
          state: "关闭"
        }
      ]