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

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

language 复制代码

<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 中，怎样弄一个可以编辑的表格

以下为示例：

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)