vuetify —— v-row 和 v-col的结合使用

最新推荐文章于 2024-09-02 08:55:34 发布

原创最新推荐文章于 2024-09-02 08:55:34 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文探讨了在Vue.js中如何使用v-for指令处理数据，通过过滤排除特定属性如'nickname'、'mobilephone'和'emailaddress'。同时展示了如何进行数组切片、填充空值以实现网格布局，并利用深拷贝方法处理数据。内容涉及前端开发中的数据操作和UI展示技巧。

<v-card-text>
  <v-row v-for="items in filterExtrl" :key="items.index">
    <v-col v-for="item in items" :key="item.id"
      ><span v-if="item.display_name">{{ item.display_name }}：</span
      ><span
        v-if="item.display_name"
        :style="{
          color: attributes[item.name] || item.default ? '' : '#9195a3'
        }"
        >{{ attributes[item.name] || item.default || "未填写" }}</span
      ></v-col
    >
  </v-row>
</v-card-text>


let newExtrlArr = extrlAttrs.filter(
  item =>
    item.name !== "nickname" &&
    item.name !== "mobilephone" &&
    item.name !== "emailaddress"
);
this.editeFilterExtrl = deepClone(newExtrlArr);
let result = [];
for (let i = 0; i < newExtrlArr.length; i += 3) {
  result.push(newExtrlArr.slice(i, i + 3));
}

result.map(item => {
  let n = (3 - item.length) % 3;
  for (let i = 0; i < n; i++) {
    item.push("");
  }
  return item;
});
this.filterExtrl = result;