前端 - 设计了一个表格，内容由其他组件传来的值渲染，如何在组件没有传值时，能呈现一个没有内容的表格，而不是dom都没有加载出来，？

Question

表格：

         <el-row class="row">            <el-col class="col">              <span style="background-color: #1c12aa;color: white;font-weight: bold;">ST01</span>              <span style="color: white;font-weight: bold;" :class="getResultClass(datalist[7].value)">{{ datalist[7].value }}</span>            </el-col>          </el-row>          <el-row class="row">            <el-col class="col">              <span style="background-color: #bfbfbf;color: #000000;font-weight: bold;">等级</span>              <span>{{ datalist[6].value}}</span>            </el-col>          </el-row>          <el-row class="row">            <el-col class="col">              <span style="background-color: #bfbfbf;color: #000000;font-weight: bold;">二维码结果</span>              <span>{{ datalist[0].value}}</span>            </el-col>            <el-col class="col">              <span style="background-color: #bfbfbf;color: #000000;font-weight: bold;">二维码X位置</span>              <span>{{ datalist[2].value}}</span>            </el-col>          </el-row>

传值组件：

    <div>      <process :titlelist="titlelist" :datalist="datalist"></process>    </div>

希望没有值传入得到时候能显示这样，而不是表格框架都没有（dom都没有加载）。

Answer 1

按照参数的格式创建只有空格字符串的假数据作为默认数据，并且给表格单元设置合理的min-width。

defaultDataList = ["  ","  ","  ","  ","  ","  ","  ","  ","  "];

Answer 2

你可以在渲染表格之前，检查 datalist 是否被提供并且是否有值。这样，当 datalist 为空或者未定义时，表格仍然会被渲染，只不过是没有内容而已。

在你的组件中，你可以使用一个计算属性 (computed property) 来检查 datalist 的值，并根据这个值来决定是否渲染表格。

下面是一个例子：

<template>  <div>    <el-table v-if="hasData" :data="datalist">      <!-- Your table columns here -->    </el-table>    <div v-else>No data available</div>  </div></template><script>export default {  props: ['titlelist', 'datalist'],  computed: {    hasData() {      return this.datalist && this.datalist.length > 0;    }  }}</script>

在上面的代码中，hasData 是一个计算属性，它会检查 datalist 是否有值。如果有值，它会返回 true 并渲染表格。如果没有值，它会返回 false 并渲染 No data available。