vuetify中实现表格的可编辑

vue+vuetify中实现表格的可编辑功能

• 最近在做vue的项目中遇到一个需要实现表格可编辑功能的需求，又因为项目选用的UI库为vuetify，认真研究了vuetify官网，并没有可编辑表格的说明。于是，自己查阅资料实现了这个需求。

<v-simple-table id="tab">
       <template v-slot:default>
         <thead>
           <!--  表头 -->
           <tr>
             <th class="text-left pa-0">Type</th>
             <th class="text-left pa-0">Sitelan IP</th>
             <th class="text-left pa-0">console IP</th>
             <th class="text-left pa-0">console Port</th>
             <th class="text-left pa-0">SN</th>
           </tr>
         </thead>
         <tbody>
           <!-- 表格内容 -->
           <tr v-for="item in desserts" :key="item.id">
             <td>
               <v-text-field
                 v-model="item.duType"
                 :readonly="item.readonly"
                 autofocus
               ></v-text-field>
             </td>
             <td>
               <v-text-field
                 v-model="item.sitelanIp"
                 :readonly="item.readonly"
                 autofocus
               ></v-text-field>
             </td>
             <td>
               <v-text-field
                 v-model="item.consoleIp"
                 :readonly="item.readonly"
                 autofocus
               ></v-text-field>
             </td>
             <td>
               <v-text-field
                 v-model="item.consolePort"
                 :readonly="item.readonly"
                 autofocus
               ></v-text-field>
             </td>
             <!-- <td>
           <v-text-field
             v-model="item.protein"
             :readonly="item.readonly"
             autofocus
           ></v-text-field>
         </td> -->
             <td>
               <v-text-field
                 v-model="item.sn"
                 :readonly="item.readonly"
                 autofocus
               ></v-text-field>
             </td>
             <template>
                 <!-- 按钮区域 -->
               <td>
                 <!-- 非修改界面显示修改，修改界面显示保存 -->
                 <v-btn rounded color="primary" dark @click="editItem(item)" small >{{ item.readonly? "修改":"保存" }}</v-btn>
                 <!-- 非修改界面显示删除 -->
                 <v-btn rounded color="error" dark small v-if="item.readonly" @click="delItem(item)">删除</v-btn>
                 <!-- 修改界面显示取消 -->
                 <v-btn rounded color="success" dark small v-if="!item.readonly" @click="cancelItem(item)">取消</v-btn>
               </td>
             </template>
           </tr>
         </tbody>
       </template>
     </v-simple-table>

 <script>
 export default {
     data () {
     return {
       // 表格数据
       desserts: [
       ],
       editedItem: {
         id: 0,
         name: '',
         calories: 0,
         fat: 0,
         carbs: 0,
         protein: 0,
         iron: '',
         readonly: true
       },
       editedIndex: -1,
       stpId：12131312，
     }
   },
     created() {
   this.fetchData(this.stpId);
 },
   methods: {
   	//请求后台返回数据
       fetchData(stpId) {
       //自己的请求接口（就口的每一条数据得有一个‘readonly’的开关控制本条数据是否开启编辑）
     xxxxxxxxxxxxxx(stpId).then((res) => {
       this.desserts = res.data;
     });
   },
     // 修改数据（保存数据)
     editItem(item) {
       this.editedIndex = this.desserts.indexOf(item);//先找到desserts数组里面对应的索引，通俗点说就是确定修改哪一行数据
       this.editedItem = Object.assign({}, item);//把未修改之前的值存到editedItem对象里面，方便用户取消修改
       //以上两行主要是为取消修改服务，要实现修改其实只需下面一行就够了，因为html中本身的标签为<v-text-field>,也就是说只需控制它的只读和非只读来回切换即可做到修改保存
       item.readonly = !item.readonly;
     },
     // 删除数据
     delItem(item) {
       const index = this.desserts.indexOf(item);//找到desserts数组里面对应的索引，通俗点说就是确定删除哪一行数据
       confirm('Are you sure you want to delete this item?') && this.desserts.splice(index, 1);//系统弹出确认框，点击确定就是删除这一行数据
     },
     // 取消
     cancelItem(item) {
       item.readonly = !item.readonly;//切换文本框的读写状态
       this.$nextTick(() =>{
       Object.assign(this.desserts[this.editedIndex], this.editedItem);//点击取消之后，把未修改之前的数据还原到desserts数组
       this.editedIndex = -1;//把索引标志置空
       })
     },
     }
   })
  };
 </script>



           

当然了，所有的数据操作最终还是要调接口的（如删除以及修改之后的保存）