当前位置：首页 > 文章列表 > 文章 > 前端 > Vuetify表格复选框与排序联动实现方法

Vuetify表格复选框与排序联动实现方法

2025-08-29 09:56:44 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《Vuetify 表格复选框与排序联动实现》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

在 Vuetify Data Table 中实现 Checkbox 与排序联动

在 Vuetify Data Table 中实现 Checkbox 与排序的联动，关键在于确保 Checkbox 的状态是响应式的，并且在排序发生变化时能够正确更新。默认情况下，直接使用数组可能导致数据不同步的问题。以下是一种解决方案，利用 Vue 3 的 ref 创建响应式数组。

问题分析

在 Vuetify Data Table 中，当点击表头进行排序时，如果 Checkbox 的状态没有正确地与排序后的数据关联，就会出现 Checkbox 选中状态错乱的问题。这是因为 Checkbox 的 v-model 绑定的数据没有响应式更新。

解决方案

使用 Vue 3 的 ref 创建响应式数组，确保 Checkbox 的状态能够随着表格数据的变化而同步更新。

步骤

引入 ref:
确保你的 Vue 组件中已经引入了 ref。通常，在 Vue 3 项目中，这是默认可用的。

使用 ref 创建响应式数组:

在 data 中，将 cb 属性使用 ref 进行包装，使其成为一个响应式引用。

import { ref } from 'vue';

export default {
  data() {
    return {
      cb: ref([]),
      // 其他数据
    };
  },
};

在模板中使用 .value 访问 ref 的值:

在模板中，通过 .value 访问 cb 属性的值。

<v-checkbox
  v-model="cb.value"
  class="cbp"
  ref="n"
  :label="item.prikey.toString()"
  :value="item.prikey"
  @click.native.stop
></v-checkbox>

<transition name="fade" :duration="{ enter: 500, leave: 0 }">
  <div v-if="cb.value.length < 1" class="ma-10">
    <v-btn text disabled> No Items Have Been Selected</v-btn>
  </div>
</transition>

<div v-if="cb.value.length > 0">
  <!-- 其他内容 -->
</div>

完整代码示例:

<template>
  <v-data-table
    dense
    :headers="headers"
    :page.sync="page"
    :items="olpayments"
    :search="search"
    @click:row="getinfo"
    hide-default-footer
    :items-per-page="ipp"
  >
    <template v-slot:top>
      <v-row>
        <v-btn
          v-if="olpayments.length > 10"
          :disabled="btndisabled"
          dense
          class="mt-1 ml-8"
          color="success"
          @click="showall"
          >{{ sar }}</v-btn
        >
        <v-divider vertical class="mx-2"></v-divider>
        <v-text-field
          dense
          v-model="search"
          label="Search "
          class="mx-4"
        ></v-text-field>
      </v-row>
    </template>
    <template v-slot:item.prikey="{ item }">
      <v-checkbox
        v-model="cb.value"
        class="cbp"
        ref="n"
        :label="item.prikey.toString()"
        :value="item.prikey"
        @click.native.stop
      ></v-checkbox>
      <!-- &lt;input type=&quot;checkbox&quot; @click.native.stop :value=item.prikey class=&quot;cb&quot; v-model=&quot;cb&quot;&gt;{{item.prikey}} -->
    </template>

    <template v-slot:footer>
      <v-divider></v-divider>
      <transition name="fade" :duration="{ enter: 500, leave: 0 }">
        <div v-if="cb.value.length < 1" class="ma-10">
          <v-btn text disabled> No Items Have Been Selected</v-btn>
        </div>
      </transition>
      <transition name="fade" :duration="{ enter: 500, leave: 0 }">
        <div v-if="cb.value.length > 0">
          <v-row>
            <v-col cols="1">
              <v-btn
                @click="submitchecked"
                elevation="8"
                height="75"
                width="80"
                class="ml-2"
                dark
                color="blue darken-3"
                >Submit<br />All<br />Checked</v-btn
              >
            </v-col>
            <v-col cols="1">
              <v-btn
                @click="printAllPdf"
                elevation="8"
                height="75"
                width="80"
                class="ml-2"
                dark
                color="blue darken-3"
                >Print<br />All<br />Tax<br />Forms</v-btn
              >
            </v-col>
            <v-col class="my-0 ml-3 pa-0" cols="1">
              <v-radio-group v-model="radioGroup">
                <v-radio value="Paid" label="Paid"></v-radio>
                <v-radio value="NSF" label="NSF"></v-radio>
              </v-radio-group>
            </v-col>
            <v-col class="ma-0 pa-0" cols="1">
              <v-radio-group v-model="radioGroup">
                <v-radio value="Mistake" label="Mistake"></v-radio>
                <v-radio value="Duplicate" label="Duplicate"></v-radio>
              </v-radio-group>
            </v-col>
            <v-col class="mr-2">
              <v-textarea
                v-model="cbnotes"
                height="75"
                background-color="blue lighten-5"
                placeholder="Add Comments Here"
                dense
                outlined
                class="my-0 mr-2"
              ></v-textarea>
            </v-col>
          </v-row>
        </div>
      </transition>
    </template>
  </v-data-table>
</template>

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      inputuser: ' ',
      btndisabled: false,
      showpage: true,
      ipp: 10,
      sar: 'all',
      page: 1,
      radioGroup2: 'Pending',
      cb: ref([]), // 使用 ref 创建响应式数组
      dab: false,
      cbnotes: '',
      radioGroup: 'Paid',
      tab: '',
      search: '',
      dialogActivity: false,
      dialogActivity2: false,
      dialogActivityMsg: '',
      dialogActivityText: '',
      dialog: false,
      dialogmarkpaid: false,
      docno: '',
      acntno: '',
      note: '',
      activity: {
        loc: '',
        process: '',
        batchid: '',
        day: '',
        bat: '',
        ent: '',
        ending: '',
        per: '',
        type: '',
        code: '',
        tran: '',
        gross: '',
        Deduction: '',
        Exemption: '',
        Base: '',
        distrib: '',
        reference: '',
      },
      newt: {
        batch: '',
        entry: '',
        reference: '',
        amount: '',
        code: '',
        status: '',
        comment: '',
        user: '',
      },
      businessnotes: [],
      statusitems: ['pending', 'paid', 'bad check', 'paid online', 'lost in mail'],
      clickedon: { taxdetails: { gross: 0, deductions: 0, exemptions: 0, taxableamount: 0 } },
      olpayments: [],
      printgroup: [],
      headers: [
        { text: 'Doc No.', value: 'prikey' },
        { text: 'Status', value: 'status' },
        {
          text: 'Account',
          align: 'start',
          value: 'accnt',
        },
        { text: 'Business', value: 'BusName' },
        { text: 'Log Date', value: 'calculatedate' },
        { text: 'Due Date', value: 'datedue' },
        { text: 'Tax Period', value: 'taxperiod' },
        { text: 'Total Tax', value: 'totaltax' },
        { text: 'Penalty', value: 'penalty' },
        { text: 'Prev Bal', value: 'balanceforward' },
        { text: 'Grand Total', value: 'grandtotal' },
      ],
    };
  },
};
</script>

注意事项