QuasarCli q-table自定义插槽内容的使用VUE3

• 在使用QuasarCli开发时候遇到table数据不显示问题，

组件部分
在此部分 v-slot插槽
top=>top-row=>body=>bottom分别对应表头，表头下面和表格可以在body插槽中定义表格的样式

<template>
  <div class="q-pa-md">
    <q-table
      title="Treats"
      :rows="rows"
      :columns="columns"
      row-key="name"
      selection="multiple"
      v-model:selected="selected"
    >

      <template v-slot:top>
        Top
      </template>

      <template v-slot:top-row>
        <q-tr>
          <q-td colspan="100%">
            Top row
          </q-td>
        </q-tr>
      </template>

<!--            <template v-slot:body = "props">-->
<!--           <tr>-->
<!--&lt;!&ndash;             {{props.row}}&ndash;&gt;-->
<!--           </tr>-->
<!--            </template>-->

<!--      <template v-slot:bottom-row>-->
<!--        <q-tr>-->
<!--          <q-td colspan="100%">-->
<!--            Bottom row-->
<!--          </q-td>-->
<!--        </q-tr>-->
<!--      </template>-->

<!--      <template v-slot:bottom>-->
<!--        Bottom-->
<!--      </template>-->

    </q-table>
  </div>
</template>

script部分
import在项目中直接使用即可

<script>
import { ref } from 'vue'
import tableDate from '../../configJS/tableConfig'
const columns = tableDate.columns
const rows = tableDate.rows
export default {
  setup () {
    return {
      selected: ref([]),
      rows,
      columns
    }
  }
}
</script>

Quasar项目更新中
如果get到了记得点赞哦！
管理系统项目连接