在 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>       <!-- <input type="checkbox" @click.native.stop :value=item.prikey class="cb" v-model="cb">{{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 的状态与表格数据的变化保持一致，从而提供更好的用户体验。在实际开发中，根据具体的需求和数据结构，可能需要进行适当的调整和优化。