table 根据返回来的数据动态展示

<table>
      <thead>
        <tr class="table-th">
          <td style="width:20%">分类</td>
            <td style="width:20%">指标</td>
            <td>定性条件</td>
        </tr>
      </thead>
      <tbody>
        <tr height="40" v-if="list.length<=0">
          <td colspan="3">暂无数据</td>
        </tr>
        <tr v-else height="40" v-for="(item,index) in list" :key="item.id">
          <td :rowspan="item.entryTypeNamespan" :class="{hidden: item.entryTypeNamedis}">{{ item.entryTypeName }}</td>
          <td>
            <el-tooltip class="item" effect="dark" :content=" item.entryName" placement="top">
              <span>{{ item.entryName }}</span>
            </el-tooltip>
          </td>
          
          <!-- 交易数据 合作月份 -->
          <td v-if="item.entryCode==$PreloanRuler.milkEntryTradeData1">
              >=
                <el-input v-model="list[index].entryValue" type="number" placeholder="请输入合作月份" style="width: 15%"></el-input>月
          </td>
          <!--交易数据 上月日均交奶量-->
          <td v-else-if="item.entryCode==$PreloanRuler.milkEntryTradeData2">
              <el-input v-model="list[index].entryValue" type="number" placeholder="请输入上月日均交奶量" style="width: 15%"></el-input>吨
          </td>
          <!--交易数据 上月月交奶天数-->
          <td v-else-if="item.entryCode==$PreloanRuler.milkEntryTradeData3">
               >=
              <el-input v-model="list[index].entryValue" type="number" placeholder="请输入上月月交奶天数" style="width: 15%"></el-input>天
          </td>
              
          <!--交易数据 牛头数-->
          <td v-else-if="item.entryCode==$PreloanRuler.milkEntryTradeData4">
              >=
               <el-input v-model="list[index].entryValue" type="number" placeholder="请输入牛头数" style="width: 15%"></el-input>个
          </td>
          <!--交易数据 供方类型-->
          <td v-else-if="item.entryCode==$PreloanRuler.milkEntryTradeData5">
                  <el-checkbox-group v-model="milkEntryTradeData5value">
                      <el-checkbox v-for="item in MilkLevelOptions" :label="item.value" :key="item.key" name="type">{{item.value}}</el-checkbox>
                   </el-checkbox-group>
          </td>
          <!--交易数据 征信评级-->
          <td v-else-if="item.entryCode==$PreloanRuler.milkEntryTradeData6">
                  <el-checkbox-group v-model="milkEntryTradeData6value">
                     <el-checkbox v-for="item in CreditLevelOptions" :label="item.value" :key="item.key" name="type">{{item.value}}</el-checkbox>
                </el-checkbox-group>
          </td>
          <!--交易数据 违约-->
          <td v-else-if="item.entryCode==$PreloanRuler.milkEntryTradeData7">非连三累六</td>
          <!--交易数据 月还款额占收入比-->
          <td v-else-if="item.entryCode==$PreloanRuler.milkEntryTradeData8">
                  <
                  <el-input v-model="list[index].entryValue" type="number" placeholder="请输入月还款额占收入比" style="width: 15%"></el-input>%
            </td>
            
            <!--财务数据 资产负债率-->
            <td v-else-if="item.entryCode==$PreloanRuler.milkEntryFinanceData1">
                    不大于
                  <el-input v-model="list[index].entryValue" type="number" placeholder="请输入资产负债率" style="width: 15%"></el-input>%
            </td>
            <!--财务数据 客户净资产（即所有者权益）-->
            <td v-else-if="item.entryCode==$PreloanRuler.milkEntryFinanceData2">
                   为正
            </td>
            <!--财务数据 净利润-->
            <td v-else-if="item.entryCode==$PreloanRuler.milkEntryFinanceData3">
                    连续
                  <el-input v-model="list[index].entryValue" type="number" style="width: 15%">为负不能融资</el-input>
            </td>
            <!--财务数据 其他-->
            <td v-else-if="item.entryCode==$PreloanRuler.milkEntryFinanceData4">
                    上年度对核心企业的订单年末形成应收账款的比率不低于
                  <el-input v-model="list[index].entryValue" type="number" style="width: 15%"></el-input>%
            </td>
            
            <!--第三方征信 工商信息-->
            <td v-else-if="item.entryCode==$PreloanRuler.milkEntryThirdPartCredit1">金电联行提供细化指标</td>
            <!--第三方征信 税务信息-->
            <td v-else-if="item.entryCode==$PreloanRuler.milkEntryThirdPartCredit2">金电联行提供细化指标</td>
            <!--第三方征信 司法风险-->
            <td v-else-if="item.entryCode==$PreloanRuler.milkEntryThirdPartCredit3">金电联行提供细化指标</td>
            <!--第三方征信 经营风险-->
            <td v-else-if="item.entryCode==$PreloanRuler.milkEntryThirdPartCredit4">金电联行提供细化指标</td>
            
            
            <!--人行征信 征信记录-->
            <td v-else-if="item.entryCode==$PreloanRuler.milkEntryPedInquiry1">
                良好，无恶意违约记录
            </td>
            <!--人行征信 逾期信息-->
            <td v-else-if="item.entryCode==$PreloanRuler.milkEntryPedInquiry2">
                当前无逾期
            </td>
            <!--人行征信 逾期信息-->
            <td v-else-if="item.entryCode==$PreloanRuler.milkEntryPedInquiry3" class="td-center">
                <p>本行及他行未有未结清不良授信（含欠息未还或本金逾期未还）</p>
                近
              <el-input v-model="list[index].entryValue" type="number" style="width: 25%"></el-input>个月内无不良类贷款、欠息记录
            </td>
            
          </tr>
      </tbody>
    </table>

<script>
import * as index from "@/api/index";
export default {
data() {
return {
　　list: [],
　　milkEntryTradeData5value:[], //交易数据-供方类型
　　milkEntryTradeData6value:[] //交易数据-征信评级
};
},
created() {
　　this.getMilkLevel() //供方类型

　　this.getCreditLevel() //征信评级
　　this.getList()
},
methods: {
　　//供方类型
　　getMilkLevel() {
　　index
　　.getObj(`/api/admin/sysDic/getDicByType/MILK_LEVEL`)
　　.then(response => {
　　　　this.MilkLevelOptions = response.data.content;
　　});
},
//征信评级
getCreditLevel() {
　　index
　　.getObj(`/api/admin/sysDic/getDicByType/CREDIT_LEVEL`)
　　.then(response => {
　　　　this.CreditLevelOptions = response.data.content;
　　});
},
handleSave() {
　　//保存贷前准入
　　this.list.forEach(item => {
　　　　if (item.entryCode == this.$PreloanRuler.milkEntryTradeData5) {
　　　　//供方类型 数组 转 str
　　　　item.entryValue = this.milkEntryTradeData5value.join(',')

　　　　} else if (item.entryCode == this.$PreloanRuler.milkEntryTradeData6) {
　　　　//征信评级 数组 转 str
　　　　item.entryValue = this.milkEntryTradeData6value.join(',')
　　　　}
　　});
　　index
　　.addObj(this.list, "/api/risk/entryConfiguration/saveForStandard")
　　.then(response => {
　　　　this.$success("保存成功!");
　　　　this.getList();
　　});
},
getList() {
　　let listQuery = {
　　　　type:'milk' //上游奶源
　　};
　　index
　　.page(listQuery, "/api/risk/entryConfiguration/listForValue")
　　.then(response => {
　　　　this.list = response.data.content;
　　　　this.getData(this.list);
　　　　this.list.map(item => {

　　　　if (item.entryCode == this.$PreloanRuler.milkEntryTradeData5) {
　　　　//交易数据-供方类型
　　　　this.milkEntryTradeData5value = (item.entryValue).split(',')

　　　　} else if (item.entryCode == this.$PreloanRuler.milkEntryTradeData6) {
　　　　//交易数据-交易评级
　　　　this.milkEntryTradeData6value = (item.entryValue).split(',')
　　　　}
　　});
　　});
},
getData(list) {
　　console.log(list[0]);
　　for (let field in list[0]) {
　　var k = 0;
　　while (k < list.length) {
　　list[k][field + "span"] = 1;
　　list[k][field + "dis"] = false;
　　for (var i = k + 1; i <= list.length - 1; i++) {
　　if (list[k][field] == list[i][field] && list[k][field] != "") {
　　list[k][field + "span"]++;
　　list[k][field + "dis"] = false;
　　list[i][field + "span"] = 1;
　　list[i][field + "dis"] = true;
　　} else {
　　break;
　　}
　　}
　　k = i;
　　}
　　}
　　return list;
　　}
　　}
};
</script>
<style scoped="scoped">
table {
border-collapse: collapse;
table-layout: fixed;
word-break: break-all;
border: 1px solid #000;
width: 100%;
}

table td {
border: 1px solid #000;
text-align: center;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 40px;
font-size: 14px;
padding: 5px 10px;
}
.noinline {
width: 40px !important;
}
.table-th {
background-color: #eff1f5;
color: black;
font-weight: bold;
}
.table-font-weight-black {
color: black;
font-weight: bold;
}
.table-left {
text-align: left;
}
.td-center {
text-align: center;
}
table tr:hover > td {
background-color: #ecf3f8;
}
.hidden {
display: none;
}
.el-input,
.el-input__inner {
text-align: right;
width: 40%;
}
</style>