问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
请你学习
    1121784

    表格：

             <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都没有加载）。
    image.png

    前端vue.js
    阅读 441
    avatarAI BotBETA

    你可以在渲染表格之前，检查 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。

    1 个回答
    得票最新
    头像
    君迹我心
      5.1k41927

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

      defaultDataList = ["  ","  ","  ","  ","  ","  ","  ","  ","  "];
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题