色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

在新的一行中開始元素

CSS
林雅南2年前7瀏覽0評論

我想用一種方式來設(shè)計(jì)下面的代碼。當(dāng)一個(gè). filter-container有一個(gè). header-container時(shí)，過濾器-container成行并排放置。filter-container應(yīng)該在新的一行開始。過濾容器將繼續(xù)在新生產(chǎn)線上緊挨著它放置，如此繼續(xù)下去。

new Vue({
  el: "#app",
  data: {
        options: [
          {
            Id: 80,
            group: { GroupName: "MatrixDesc" },
            column: { ColumnAlias: "ReviewStatus" },
          },
          { Id: 81, group: { GroupName: "" }, column: { ColumnAlias: "AOI" } },
          {
            Id: 82,
            group: { GroupName: "" },
            column: {
              ColumnAlias: "Location",
            },
          },
          {
            Id: 83,
            group: { GroupName: "Header2" },
            column: { ColumnAlias: "Chemical" },
          },
          {
            Id: 84,
            group: { GroupName: "" },
            column: {
              ColumnAlias: "CollectionDate",
            },
          },
        ],
      },
  
})

<link  rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">  
  <div class="d-flex flex-wrap align-items-end mx-3">
    <div v-for="(fdata, index) in options" :key="index">
      <span v-if="fdata.group != null">
        <div v-if="fdata.group.GroupName" class="header-container">
          <h4>{{ fdata.group.GroupName }}</h4>
        </div>
        <div class="Filter-with-header">
          <div class="Filter-info-wrapper">
            <input
              type="text"
              spellcheck="false"
              v-model="fdata.column.ColumnAlias"
            />
          </div>
        </div>
      </span>
    </div>
  </div>
</div>

期權(quán)數(shù)據(jù)可以調(diào)整嗎？應(yīng)該組合在一起的所有內(nèi)容使用相同的組名會更有意義。然后，計(jì)算的屬性可以獲得唯一的ue組名數(shù)組。接下來，用v-for呈現(xiàn)每個(gè)唯一的組，然后在其中用另一個(gè)v-for呈現(xiàn)與該組名稱匹配的所有選項(xiàng)。

<div id="app">  
  <div v-for="group in uniqueGroups" class="header-container row mx-3">
    <div class="col-12">
      <h4>{{ group }}</h4>
      <div  class="row mx-0 my-2">
        <div v-for="(fdata, index) in options" :key="index">
          <template v-if="fdata.group != null && fdata.group.GroupName === group">
            <div class="Filter-with-header">
              <div class="Filter-info-wrapper">
                <input
                  type="text"
                  spellcheck="false"
                  v-model="fdata.column.ColumnAlias"
                />
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</div>

new Vue({
  el: "#app",
  data: {
    options: [
      {
        Id: 80,
        group: { GroupName: "MatrixDesc" },
        column: { ColumnAlias: "ReviewStatus" },
      },
      { 
        Id: 81, 
        group: { GroupName: "MatrixDesc" }, 
        column: { ColumnAlias: "AOI" }
      },
      {
        Id: 82,
        group: { GroupName: "MatrixDesc" },
        column: { ColumnAlias: "Location" },
      },
      {
        Id: 83,
        group: { GroupName: "Header2" },
        column: { ColumnAlias: "Chemical" },
      },
      {
        Id: 84,
        group: { GroupName: "Header2" },
        column: { ColumnAlias: "CollectionDate" },
      },
    ],
  },
  computed: {
    uniqueGroups() {
      return [...new Set(this.options.map(o => o.group.GroupName))]
    }
  }
})

jsdild示例