在NUXT 中，怎样弄一个可以编辑的表格

在NUXT 中，怎样弄一个可以编辑单元格的表格。
以下是“知识库” 给我的源代码，但还是不能编辑。

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址">
        <template slot-scope="scope">
          <el-input v-model="scope.row.address" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

cleanXss
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'EditTable',
  setup() {
    const tableData = [
      { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
      { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
      { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }
    ]

    return { tableData }
  }
})
cleanXss

XueChen

这家伙很懒，什么也没写~

1年前

在NUXT 中，怎样弄一个可以编辑的表格

以下为示例：
<template>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
item-key="name"
class="elevation-1"

<template v-slot:item.action="{ item }">
  <v-icon small class="mr-2" @click="editItem(item)">
    mdi-pencil
  </v-icon>
  <v-icon small @click="deleteItem(item)">
    mdi-delete
  </v-icon>
</template>

<template v-slot:top>
  <v-dialog v-model="dialog" max-width="500px">
    <template v-slot:activator="{ on, attrs }">
      <v-btn color="primary" dark class="mb-2" v-bind="attrs" v-on="on">
        New Item
      </v-btn>
    </template>
    <v-card>
      <v-card-title>
        <span class="headline">{{ editedIndex === -1 ? 'New Item' : 'Edit Item' }}</span>
      </v-card-title>

      <v-card-text>
        <v-container>
          <v-row>
            <v-col cols="12" sm="6" md="4">
              <v-text-field v-model="editedItem.name" label="Dessert name"></v-text-field>
            </v-col>
            <v-col cols="12" sm="6" md="4">
              <v-text-field v-model="editedItem.calories" label="Calories"></v-text-field>
            </v-col>
          </v-row>
        </v-container>
      </v-card-text>

      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="blue darken-1" text @click="close">
          Cancel
        </v-btn>
        <v-btn color="blue darken-1" text @click="save">
          Save
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

</v-data-table> </template>

cleanXss ({
dialog: false,
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Actions', value: 'action', sortable: false },
],
desserts: [],
editedIndex: -1,
editedItem: {
name: '',
calories: 0,
},
defaultItem: {
name: '',
calories: 0,
},
}),

methods: {
editItem(item) {
this.editedIndex = this.desserts.indexOf(item)
this.editedItem = Object.assign({}, item)
this.dialog = true
},

deleteItem(item) {
  const index = this.desserts.indexOf(item)
  confirm&#40;'Are you sure you want to delete this item?'&#41; && this.desserts.splice(index, 1)
},

close() {
  this.dialog = false
  setTimeout&#40;(&#41; => {
    this.editedItem = Object.assign({}, this.defaultItem)
    this.editedIndex = -1
  }, 300)
},

save() {
  if (this.editedIndex > -1) {
    Object.assign(this.desserts[this.editedIndex], this.editedItem)
  } else {
    this.desserts.push(this.editedItem)
  }
  this.close()
},

},
}
cleanXss

赞同(0)