vue控制只读_（vue+vuetify）实现可编辑表格(小白也能懂)

我查遍整个vuetify官网，里面只有弹出对话框的可编辑表格，并没有这种在表格内就可编辑的功能，所以写了这篇文章，以便大家备一手，学会这招你可以秒天秒地秒空气，防老师防领导防项目经理。

HTML代码如下：

<div id="app">
    <v-app>
      <template>
        <v-card style="width:70%; margin: 200px auto;">
          <v-card-title>
            可编辑表格
          </v-card-title>
        <v-simple-table id="tab">
          <template v-slot:default>
            <thead>
              <!--  表头 -->
              <tr>
                <th class="text-left">Name</th>
                <th class="text-left">Calories</th>
                <th class="text-left">fat</th>
                <th class="text-left">carbs</th>
                <th class="text-left">protein</th>
                <th class="text-left">iron</th>
                <th class="text-left">actions</th>
              </tr>
            </thead>
            <tbody&