Question

我正在尝试创建一个模板，该模板针对数据对象中的许多项目重复此操作。但是，根据Quasar的说法，我需要一个针对表行的v槽属性，并且我已经对行进行了编号以帮助我实现这一目标。问题是，我需要动态读取该v槽。我很难解释这一点，所以让我告诉你：

类星体表语法如下：

<q-table :data="allLockbox" :columns="columns" row-key="name">
  <template v-slot:body-cell-1="props">
    <q-td :props="props">
      <p>
        This is row 1
      </p>
    </q-td>
  </template>
  <template v-slot:body-cell-2="props">
    <q-td :props="props">
      <p>
        This is row 2
      </p>
    </q-td>
  </template>
  <template v-slot:body-cell-3="props">
    <q-td :props="props">
      <p>
        This is row 3
      </p>
    </q-td>
  </template>
  ... ... ...
  <template v-slot:body-cell-nth="props">
    <q-td :props="props">
      <p>
        This is row nth
      </p>
    </q-td>
  </template>
</q-table>

数据的数组包含的行数尽可能多，例如：

worktransfers: ["1", "2", "3", "4", "5", "6", "7"]

理想情况下，在这种情况下，我想运行v-for以遍历数组并生成7个模板。 VueJS文档允许在没有键的情况下在模板中进行v-for（这也会在循环内创建错误，但现在不行）。我的问题是...如何使v-slot cell name动态，以便根据循环索引呈现单元名称？...我已经尝试过：

<template v-for="(worktransfer, index) in worktransfers" v-slot:body-cell-{{index}}="props">

还有字符串文字

<template v-for="(worktransfer, index) in worktransfers" `v-slot:body-cell-${{index}}`="props">

均无效。我该如何使该单元格名称动态化为数据，以便其将模板循环为body-cell-1，body-cell-2，body-cell-3等？

Answer 1

文档重新。动态插槽名称在这里

https://vuejs.org/v2/guide/components-slots.html#Dynamic-Slot-Names

两个要求

vue 2.6.0 +
使用[]括号：v-slot:[dynamicSlotName]

正如@Ricky在他的评论中指出的那样，这应该有效

  <template v-slot:['body-cell-'+index]="props">
    <q-td :props="props">
      <p>
        This is row {{index}}
      </p>
    </q-td>
  </template>

更新

这是显示动态组件命名工作https://jsfiddle.net/dapo/mLe4v8j7/

的jsfiddle

代码：

Vue.component('parent', {
  template: `<div class="parent">
        <h4>Parent Component</h4>
        
        <h3>computed</h3>
    		<child>
          <template v-for="(item, i) in slotNamesDynamic" v-slot:[item]="props">
            <p>computed {{props.text}}</p>
          </template>
        </child>
        
        <h3>dynamic</h3>
    		<child>
          <template v-for="(item, i) in slotNames" v-slot:['body-cell-'+item]="props">
            <p>dynamic {{props.text}}</p>
          </template>
        </child>
        
        <h3>function</h3>
    		<child>
          <template v-for="(item, i) in slotNames" v-slot:[slotname(item)]="props">
            <p>function {{props.text}}</p>
          </template>
        </child>
        
      </div>
    `,
  props: ['slotNames'],
  computed: {
    slotNamesDynamic() {
      return (this.slotNames || []).map(n => 'body-cell-' + n)
    }
  },
  methods: {
    slotname(id) {
      return 'body-cell-' + id
    }
  }
});

Vue.component('child', {
  template: `
      <div class="child">
        <h4>Child Component</h4>
        <slot name="body-cell-0" text="component slot 'body-cell-0'">1
        </slot>
        <slot name="body-cell-1" text="component slot 'body-cell-1'">2
        </slot>
        <slot name="body-cell-2" text="component slot 'body-cell-2'">3
        </slot>
      </div>`,
});

new Vue({
  el: '#app',
  data: {
    slotNames: ["0", "1", "2"]
  }
})

.child{
  border: 1px solid #999;
  margin: 0 0 0 2em;
  padding: 1em;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.0/vue.js"></script>
<div id="app">
  <parent :slot-names="slotNames"></parent>
</div>

模板的attribute属性中的动态循环

1 个答案:

更新