更喜欢视频?我把你盖住了!

我一直使用可选择的行和可扩展的行!我会给你一个现实世界的例子。

我们为围场记录“喷洒事件”,有时一个围场会被多次喷洒!我们的应用程序按围场对单个喷雾进行分组,并在父行中提供“喷雾总量”!

[使用 QTable的围场喷雾](https://res.cloudinary.com/practicaldev/image/fetch/s--LEqv1NNo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i. imgur.com/qtLZRyr.png)

现在看看当我们点击其中一行时会发生什么......

[QTable 扩展的围场喷雾](https://res.cloudinary.com/practicaldev/image/fetch/s--5IDC8kjs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i .imgur.com/QxtoB4B.png)

农民喜欢它!你猜怎么着...

使用 Quasar 的 QTable 构建起来非常容易**!我会告诉你怎么做😊

另外,请注意底部的 Totals 行? Quasar也是小菜一碟! (更多关于未来博客文章中的摘要行)

现在,在我们深入研究之前,请查看QuasarComponents.Com以了解[上的一些 动作包装、心脏 POUNDING、指甲咬、高强度视频所有 72 Quasar的组件!

点击这里我们另一边见😁

小设置

让我们做一些基本的设置,让事情顺利进行!

<script>
import { ref } from 'vue'

export default {
  setup () {
    const selected = ref()

    const rows = [
      {
        id: 1,
        name: 'Panda',
        email: 'panda@chihuahua.com',
        age: 6
      },
      {
        id: 2,
        name: 'Lily',
        email: 'lily@chihuahua.com',
        age: 5
      }
    ]

    const columns = [
      { label: 'expand', name: 'expand', field: 'expand' },
      { label: 'id', field: 'id', name: 'id' },
      { label: 'name', field: 'name', name: 'name' },
      { label: 'email', field: 'email', name: 'email' },
      { label: 'age', field: 'age', name: 'age' }
    ]

    return {
      rows,
      columns,
      selected
    }
  }
}
</script>

进入全屏模式 退出全屏模式

,这里是 github 仓库

可扩展行

使用#body插槽可扩展行。我来看看它是怎么做的😎

<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
>
  <template #body="props">
    <q-tr :props="props">
      <!-- Expand cell/button -->
      <q-td
        key="expand"
        name="expand"
        :props="props"
        auto-width
      >
        <!--
          The important part here is
          @click="props.expand = !props.expand"
        -->
        <q-btn
          flat
          round
          :icon="props.expand ? 'remove' : 'add'"
          @click="props.expand = !props.expand"
        />
      </q-td>
      <!--
        Notice that we the "key" matches the columns "name" property
        Notice that we "proxy" the props from #body="props" to our q-td
      -->
      <q-td
        key="id"
        :props="props"
      >
        {{ props.row.id }}
      </q-td>
      <q-td
        key="name"
        :props="props"
      >
        {{ props.row.name }}
      </q-td>
      <q-td
        key="email"
        :props="props"
      >
        {{ props.row.email }}
      </q-td>
      <q-td
        key="age"
        :props="props"
      >
        {{ props.row.age }}
      </q-td>
    </q-tr>
    <!-- We show the row if "props.expand" is toggled to true! -->
    <q-tr
      v-show="props.expand"
      :props="props"
    >
      <q-td colspan="100%">
        <div class="text-left">
          Expanded
        </div>
      </q-td>
    </q-tr>
  </template>
</q-table>

进入全屏模式 退出全屏模式

全部关闭

[Basic QTable Expandable Row Example Closed](https://res.cloudinary.com/practicaldev/image/fetch/s--hcR64-Yz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https: //i.imgur.com/fQ06tvw.png)

展开一行

[Basic QTable Expandable Row Example Opened](https://res.cloudinary.com/practicaldev/image/fetch/s--BEKV9cJ7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// i.imgur.com/jWkLe6s.png)

这里有几点需要注意:

第一:#body插槽允许我们进入各个行

第二:我们使用 Quasar 的q-tr和q-td组件来构建行。这给了我们疯狂的控制!

第三:我们使用范围(#body="props")并将其传递给每个q-td和q-tr。这很重要!这意味着我们的q-tr和q-td获得了dense和visible-columns等所需的所有样式(稍后会详细介绍)

第四:我们可以切换/跟踪一行是否扩展为props.expanded

来回阅读这四点,直到它们有意义!了解它们,您将拥有对 Quasar 的 QTable 的强大的力量!

另请注意,在展开的行中,我们使用colspan="100%"基本上表示“占用该行中的所有空间”。对于插入新行的“创建”按钮之类的东西很有帮助。

AND,auto-width“尝试缩小列宽大小;对带有复选框/单选/切换的列有用”

每行的单个单元格

为了彻底,这是一个示例,其中展开的行有单元格,与父行上的单元格对齐......

<!-- Expandable Row (cells) -->
<q-table
  :rows="rows"
  :columns="columns"
  row-key="id"
>
  <template #body="props">
    <!-- PARENT ROW -->
    <q-tr :props="props">
      <!-- Expand cell/button -->
      <q-td
        key="expand"
        name="expand"
        :props="props"
        auto-width
      >
        <q-btn
          flat
          round
          :icon="props.expand ? 'remove' : 'add'"
          @click="props.expand = !props.expand"
        />
      </q-td>
      <q-td
        key="id"
        :props="props"
      >
        {{ props.row.id }}
      </q-td>
      <q-td
        key="name"
        :props="props"
      >
        {{ props.row.name }}
      </q-td>
      <q-td
        key="email"
        :props="props"
      >
        {{ props.row.email }}
      </q-td>
      <q-td
        key="age"
        :props="props"
      >
        {{ props.row.age }}
      </q-td>
    </q-tr>
    <!-- CHILD ROW -->
    <q-tr
      v-show="props.expand"
      :props="props"
    >
      <!--
        Might want to leave the first cell blank, as it is
        simply space for the "expand" column
      -->
      <q-td
        key="expand"
        :props="props"
      />
      <q-td :props="props">
        summary
      </q-td>
      <q-td
        key="id"
        :props="props"
      >
        summary
      </q-td>
      <q-td
        key="name"
        :props="props"
      >
        summary
      </q-td>
      <q-td
        key="email"
        :props="props"
      >
        summary
      </q-td>
      <q-td
        key="age"
        :props="props"
      >
        summary
      </q-td>
    </q-tr>
  </template>
</q-table>

进入全屏模式 退出全屏模式

[子行中包含单元格的可扩展行](https://res.cloudinary.com/practicaldev/image/fetch/s--QKobpQTi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https: //i.imgur.com/RYqt0vU.png)

那些说“总结”的地方......你可以把你喜欢的任何东西放在那些单元格中!

大提示:使用props.row访问当前行🚣

哈!表情笑话😆

还值得注意的是您可以拥有任意数量的“子”行!

我的朋友,那是可扩展的行。现在让我们继续让行可选择。

可选行。类星体的礼物🎁

这真的是一份礼物!我过去自己实现了一个“可选行”功能,你知道吗?

它糟透了!

Quasar 比吹两岁孩子的生日蜡烛更容易🎂(你不应该这样做,这不酷)......

核实!

<q-table
  v-model:selected="selected"
  selection="single"
  :rows="rows"
  row-key="id"
/>

进入全屏模式 退出全屏模式

[QTable基本选择](https://res.cloudinary.com/practicaldev/image/fetch/s--3rt65Ntw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur .com/LNh0Mpz.png)

是的!真的是轻而易举😱😱😱

我什至需要解释这段代码!?

需要注意的一件事是row-key用于唯一标识所选数据,因此您需要它!

热点提示:在测试时使用pre标签很好地显示此数据...

<pre>{{ selected }}</pre>

进入全屏模式 退出全屏模式

这就是所有酷孩子都在做的事情(或者我被告知)

“但是卢克!我想使用 TOGGLE,而不是复选框

哦!?你现在做吗!?

别担心我好奇的朋友!卷起袖子试试这个!

<q-table
  v-model:selected="selected"
  selection="multiple"
  :rows="rows"
  row-key="id"
>
  <template #header-selection="scope">
    <q-toggle v-model="scope.selected" />
  </template>

  <template #body-selection="scope">
    <q-toggle v-model="scope.selected" />
  </template>
</q-table>

进入全屏模式 退出全屏模式

[使用插槽选择自定义 Quasar QTable](https://res.cloudinary.com/practicaldev/image/fetch/s--P9NklsyK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// i.imgur.com/DvUyFCu.png)

(你有没有看到我厚颜无耻的笑话?)

请注意,scope.selected是一个简单的函数,可以为您切换选择。容易吧?

您是否开始了解 Quasar 的 API 如何让构建组件变得幸福?我爱它❤️

多选

您可以通过将selection="single"更改为selection="multiple"来启用多项选择🍪

“卢克!这太酷了!我想要更多”

哦,太好了,我喜欢你的热情!

如果您想了解有关这些内容的更多信息,请前往QuasarComponents.Com

在那个系列中,我们将...

  • 盖全部 72的 Quasar 组件

  • BuildYouTube 的 UI与 Quasar

  • 使用 Laravel 和 Quasar 构建实时聊天应用程序

  • 构建 Quasar应用程序扩展

所有收益都直接捐赠给 Quasar Dev 团队!

在这里查看

感谢阅读🤓。明天我们将介绍加载状态、分页和排序(你会喜欢分页)。

暂时再见!并且请为了对代码的热爱记住,

没有什么是你无法建造的......

# vue.js # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue