怎么用数据数据渲染多行3列，每行满足3列时两端对齐，不满足3列时左对齐，且间距跟两端对齐的间距一样

为了实现这样的布局，你可以使用表格（table）元素以及CSS来控制其样式。如果你是在HTML中创建这个表格，可以按照以下步骤操作：

1. 创建HTML结构：

<table class="data-render">
  <tr>
    <td>第一列内容</td>
    <td>第二列内容</td>
    <td>第三列内容</td>
  </tr>
  <!-- 更多行... -->
</table>

2. 添加CSS规则：

.data-render {
  width: 100%; /* 设置表格宽度 */
  border-collapse: collapse; /* 合并边框 */
}

.data-render td {
  border: 1px solid #ccc; /* 边框样式 */
  padding: 8px; /* 内容间距 */
  white-space: nowrap; /* 防止文字换行 */
}

.data-render td:last-child {
  text-align: right; /* 右对齐最后一列 */
}

.data-render tr:nth-child(even) td,
.data-render tr:last-child td {
  background-color: #f2f2f2; /* 偶数行背景色 */
}

[data-columns~="3"] .data-render tr {
  display: flex;
  flex-wrap: wrap;
}

[data-columns~="3"] .data-render td {
  flex-basis: calc(33.33% - 16px); /* 每列宽度减去间距 */
}

[data-columns~="3"]:not(:last-child) .data-render td:last-child {
  text-align: left; /* 如果不满三列，其他非最后一列左对齐 */
}

在这个例子中，`[data-columns~="3"]`是一个自定义的数据属性，用于指定是否需要按3列显示。如果有这个属性，则会应用相应的Flexbox布局。