Pass template instead of property value

[davydof]

Now I can render in the column only prop value.

It will be great if I can render my template for each prop, e.g.:

<template>
  <vue-virtual-table
    :config="tableConfig"
    :data="tableData"
  >
    <template slot-scope="scope" slot="user-info">
      <div>{{scope.info}}</div>
    </template>

    <template slot-scope="scope" slot="age-info">
      <div>{{scope.info}}</div>
    </template>
  </vue-virtual-table>
</template>

<script>
import VueVirtualTable from 'vue-virtual-table'
export default {
  components: {
    VueVirtualTable
  },
  data: {
    tableConfig: [
      {prop: 'name', name: 'Name'},
      {prop: 'age', name: 'Age', slotName: 'age-info'},
      {prop: 'info', name: 'Info', slotName: 'user-info'}
    ],
    tableData: [
      {user: 'a1', age: 20},
      {user: 'a2', age: 21},
      {user: 'a3', age: 23}
    ]
  }
}
</script>

Thanks! @waningflow

[davydof]

update

I tried this example, but sortable doesn't work.

<template>
  <vue-virtual-table
    :config="tableConfig"
    :data="tableData"
  >
    <template slot-scope="scope" slot="name">
      <div>{{scope.row.info}}</div>
    </template>

    <template slot-scope="scope" slot="age">
      <div>{{scope.row.info}}</div>
    </template>
  </vue-virtual-table>
</template>

<script>
import VueVirtualTable from 'vue-virtual-table'
export default {
  components: {
    VueVirtualTable
  },
  data: {
    tableConfig: [
      {prop: '_action', name: 'Name', actionName: 'name'},
      {prop: '_action', name: 'Age', actionName: 'age'},
      {prop: 'info', name: 'Info'}
    ],
    tableData: [
      {user: 'a1', age: 20},
      {user: 'a2', age: 21},
      {user: 'a3', age: 23}
    ]
  }
}
</script>

[waningflow]

You can use the special prop "_action". The config:

tableConfig: [
      {prop: 'name', name: 'Name'},
      {prop: '_action', name: 'Age', actionName: 'age-info'},
      {prop: '_action', name: 'Info', actionName: 'user-info'}
]

The template:

<template slot-scope="scope" slot="user-info">
      <div>{{scope.row.info}}</div>
</template>
<template slot-scope="scope" slot="age-info">
      <div>{{scope.row.info}}</div>
</template>

[waningflow]

update

I tried this example, but sortable doesn't work.

<template>
  <vue-virtual-table
    :config="tableConfig"
    :data="tableData"
  >
    <template slot-scope="scope" slot="name">
      <div>{{scope.row.info}}</div>
    </template>

    <template slot-scope="scope" slot="age">
      <div>{{scope.row.info}}</div>
    </template>
  </vue-virtual-table>
</template>

<script>
import VueVirtualTable from 'vue-virtual-table'
export default {
  components: {
    VueVirtualTable
  },
  data: {
    tableConfig: [
      {prop: '_action', name: 'Name', actionName: 'name'},
      {prop: '_action', name: 'Age', actionName: 'age'},
      {prop: 'info', name: 'Info'}
    ],
    tableData: [
      {user: 'a1', age: 20},
      {user: 'a2', age: 21},
      {user: 'a3', age: 23}
    ]
  }
}
</script>

"sortable" is only available in normal props.

[davydof]

Yes, I wrote the same. I want to use template with regular sortable prop. Make sense to give the ability for this functionality.

[davydof]

@waningflow friendly ping

I want to use the regular prop with sorting