登录
首页 >  文章 >  前端

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

时间:2025-08-29 09:56:44 444浏览 收藏

欢迎各位小伙伴来到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 的状态能够随着表格数据的变化而同步更新。

步骤

  1. 引入 ref:

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

  2. 使用 ref 创建响应式数组:

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

    import { ref } from 'vue';
    
    export default {
      data() {
        return {
          cb: ref([]),
          // 其他数据
        };
      },
    };
  3. 在模板中使用 .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>
  4. 完整代码示例:

    <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>

注意事项

  • 确保 v-model 绑定的是 cb.value,而不是直接绑定 cb。
  • 在 Vue 3 中,使用 ref 创建的响应式数据需要通过 .value 访问其值。

总结

通过使用 ref 创建响应式数组,可以有效地解决 Vuetify Data Table 中 Checkbox 与排序不同步的问题。这种方法确保 Checkbox 的状态与表格数据的变化保持一致,从而提供更好的用户体验。在实际开发中,根据具体的需求和数据结构,可能需要进行适当的调整和优化。

本篇关于《Vuetify表格复选框与排序联动实现方法》的介绍就到此结束啦,但是学无止境,想要了解学习更多关于文章的相关知识,请关注golang学习网公众号!

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>