css - create table using weex

Question

I need to build an app that has a table. I tried using html <table> tags to build a table. Even though it shows the table as i require when i run using npm run serve when i build an apk and run it on my android device the output is messed up. Does anyone know how to build a table in weex. And does anyone have any good documentations or tutorials regarding weex. thanks

Answer 1

正如其他人所评论的那样，Weex 不使用 HTML，而是使用看起来相似的 XML 语法。所以你需要实现类似于 using only <div>s 的东西。我必须这样做，所以我不妨把它贴在这里。

<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 和 Web 中按预期工作和呈现。

---

作为旁注，如果您min-width为列指定固定宽度（或 s），则样式会容易得多。这就是为什么我指定了一个.headingColumn类并且里面有一个注释width:100px值.cell。

---

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

Answer 2

它看起来像 HTML，但 Weex 并没有在 native 上呈现实际的 HTML。你写的<div>s 是被翻译到目标平台的 Weex 组件。

因此，虽然在浏览器上运行可能会渲染表格，但在 Weex 有默认<table>组件之前，它不会像您期望的那样在原生上渲染。

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