使用weex创建表

Question

我需要建立一个有表的应用程序。我尝试使用html <table>标记来构建一个表。当我使用npm run serve运行时，即使它显示了我所需要的表格，当我构建一个apk并在我的安卓设备上运行它时，输出也是混乱的。有没有人知道如何在weex中建表。有没有人有什么好的文档或者是关于weex的教程。谢谢

​

Answer 1

它看起来像HTML，但Weex并不在原生上呈现实际的HTML。您编写的<div>是转换到目标平台的Weex组件。

因此，当在浏览器上运行时可能会渲染表，除非Weex有一个默认的<table>组件，否则它不会像您期望的那样在本机上渲染。

您可以创建自己的组件并使用flexbox对其进行布局。

Answer 2

正如其他人所评论的那样，Weex没有使用HTML，而是使用了一种类似的XML语法。所以你需要实现一些类似于只使用<div>的东西，我必须这样做，所以我也可以把它贴在这里。

<template>
  <div class="table">
    <div class="row heading">
      <div class="cell headingColumn">Table</div>
      <div class="cell">2</div>
      <div class="cell">3</div>
    </div>
    <div class="row">
      <div class="cell headingColumn">Row 1</div>
      <div class="cell">2</div>
      <div class="cell">3</div>
    </div>
    <div class="row">
      <div class="cell headingColumn">Row 2</div>
      <div class="cell">2</div>
      <div class="cell">3</div>
    </div>
  </div>
</template>
<style scoped>
.table {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  height: 60px;
}
.cell {
  display: flex;
  justify-content: center;
  align-items: center;

  flex-grow: 1;

  /*width: 100px;*/
  padding: 20px;
}
.heading {
  background-color: grey;
  font-weight: bold;
}

.headingColumn {
  width: 120px;
}
</style>

将其复制并粘贴到dotwe.org中，它将按照预期在Android和网络中工作和渲染。

顺便说一句，如果您为列指定固定宽度(或min-width)，样式将会容易得多。这就是为什么我指定了一个.headingColumn类，并且在.cell中有一个注释的width:100px值。

顺便说一句，您可能需要编辑，并在其中添加一个包含所需文本内容的标记。