如何用vue展示二维数组

如何用vue展示二维数组

一.代码实现

我们可以用vue组库件element的el-row和el-col来实现。

<template>
  <div>
    <fieldset>
      <legend>二维数组</legend>
      <!-- 遍历一维数组的个数 -->
      <el-row
        :gutter="20"
        v-for="(itemRow, indexRow) in dataArry"
        :key="indexRow"
        :label="itemRow"
      >
        <!-- 遍历每一个一维数组的元素个数 -->
        <el-col
          :span="4"
          v-for="(itemCol, indexCol) in itemRow"
          :key="indexCol"
          :label="itemCol"
          >{{ itemCol }}</el-col
        >
      </el-row>
    </fieldset>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataArry: [
        [1, 1, 0, 0, 1],
        [0, 1, 0, 0, 1],
        [0, 0, 1, 1, 1],
        [0, 0, 1, 1, 1],
        [0, 0, 0, 0, 1],
      ],
    };
  },
};
</script>

<style scoped>
fieldset {
  /* 表单页面居中，宽度40% ,legend颜色设置，legend圆角*/
  border: 2px solid #dcdfe6;
  text-align: top;
  border-radius: 8px;
  margin: 0 auto;
  width: 40%;
}
</style>

二.效果