ACATTTTA 2021-07-26 12:46 采纳率: 60%
浏览 133
已结题

关于vue列表对不齐的问题

img

img

     <el-row :gutter="24">
                <el-col :span="6">
                  <div style="height: 100%;padding: 50% 0 0 45%;color: #FFF;">
                    <div v-if="ciyuntulist.length>0 && Number(ciyuntulist[0].positive) >= 0">
                      <span style="line-height:2em;font-size:24px;">{{ ciyuntulist[0].positive }}%</span>
                    </div>
                    <div style="width: 100%;">正面评价</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div style="height: 100%;">
                    <table class="tableccc" style="width: 100%">
                      <tr>
                        <td style="width: 30%;text-align: center;">正面评价 Top10</td>
                        <td style="width: 30%;text-align: center;">占比(单位:%)</td>
                      </tr>
                    </table>
                    <table class="benchmark_table" style="width: 100%">
                      <tbody>
                        <tr v-for="(obj,index) in ciyuntulist" :key="index">
                          <td style="width: 30%;text-align: center;">{{ obj.mykeyType }}</td>
                          <td style="width: 30%;text-align: center;">
                            <span v-if="Number(obj.mykeyWord) >= 0">{{ obj.mykeyWord }}%</span>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div style="height: 100%;padding: 50% 0 0 45%;color: #FFF;">
                    <div v-if="ciyuntulist.length>0 && Number(ciyuntulist[0].negative) >= 0">
                      <span style="line-height:2em;font-size:24px;">{{ ciyuntulist[0].negative }}%</span>
                    </div>
                    <div style="width: 100%;">负面评价</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <table class="tableccc" style="width: 100%">
                    <tr>
                      <td style="width: 30%;text-align: center;">负面评价 Top10</td>
                      <td style="width: 30%;text-align: center;">占比(单位:%)</td>
                    </tr>
                  </table>
                  <table class="benchmark_table" style="width: 100%">
                    <tbody>
                      <tr v-for="(obj,index) in ciyuntulist" :key="index">
                        <td style="width: 30%;text-align: center;">{{ obj.bmykeyType }}
                        </td>
                        <td style="width: 30%;text-align: center;">
                          <span v-if="Number(obj.bmykeyWord) >= 0">{{ obj.bmykeyWord }}%</span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </el-col>

 <div style="color: #FFF;width: 100%;text-align:center;">
              <div v-if="recilist==='正面' && ciyuntulist.length>0 && Number(ciyuntulist[0].positive) >= 0">
                <span style="line-height:2em;font-size:14px;">正面评价&nbsp;</span>
                <span style="line-height:2em;font-size:24px;">{{ ciyuntulist[0].positive }}%</span>
              </div>
              <div v-if="recilist==='负面' && ciyuntulist.length>0 && Number(ciyuntulist[0].negative) >= 0">
                <span style="line-height:2em;font-size:14px;">负面评价&nbsp;</span>
                <span style="line-height:2em;font-size:24px;">{{ ciyuntulist[0].negative }}%</span>
              </div>
            </div>
            <table class="tableccc" style="width: 100%">
              <tr>
                <td style="width: 30%;text-align: center;">评价内容</td>
                <td style="width: 35%;text-align: center;">占比</td>
              </tr>
            </table>
            <table class="benchmark_table" style="width: 100%">
              <tbody>
                <tr v-for="(obj,index) in hostwordlist" :key="index">
                  <td style="width: 30%;text-align: center;">
                    <span v-if="listQuery.recitype == '1'">{{ obj.mykeyType }}</span>
                    <span v-if="listQuery.recitype == '2'">{{ obj.bmykeyType }}</span>
                  </td>
                  <td style="width: 35%;text-align: center;">
                    <span v-if="Number(obj.mykeyWord) >= 0 && listQuery.recitype == '1'" style="color:red">{{ obj.mykeyWord }}%</span>
                    <span v-if="Number(obj.bmykeyWord) >= 0 && listQuery.recitype == '2' " style="color:red">{{ obj.bmykeyWord }}%</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>


  • 写回答

1条回答 默认 最新

  • 关注

    把table改为element-ui的el-table试试。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 7月27日
  • 已采纳回答 7月27日
  • 创建了问题 7月26日

悬赏问题

  • ¥15 MATLAB yalmip 可转移负荷的简单建模出错,如何解决?
  • ¥15 数学的三元一次方程求解
  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?