PrimeVue：通过CDN选项编辑DataTable单元格

前端开发 2026-07-12

我是PrimeVue的新手，在带单元格编辑的数据表格上遇到了困难。当我点击单元格时，它不会进入编辑模式：https://primevue.org/datatable/#cell_edit

下面有一个能复现我问题的代码块，使用Chrome打开页面。

我认为我调用组件的方式是正确的，和开发者给出的日期选择器“Hello World”示例的模式一致。

<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://unpkg.com/primevue/umd/primevue.min.js"></script>
  <script src="https://unpkg.com/@primeuix/themes/umd/aura.js"></script>
<script type="module" defer=true>
const { createApp, ref } = Vue;

const app = createApp({
  data() {
    const date = ref();
    return {
      columns:[{field:"id", header:"Code"},{field:"name",header:"Name"}],
      phases: [],
    }
  },

  delimiters: ['[[',']]'],

  methods: {
    onCellEditComplete(e) {
    },

    async fetchData() {
      this.phases = []
      try {
        const res = await fetch(`/phases`)
        if (res.ok) this.phases = await res.json()
      } catch(error) {
          console.error("There was an error!", error);
      }
    },

    renderData() {
    }
  },

  mounted() {
    this.fetchData();
  },

  watch: {
    phases() {
      for(var i = 0; i < this.phases.length; i++) {
        this.phases[i]["url"] = "/phases/" + this.phases[i].id
      }
      this.renderData()
    }
  }
})

app.use(PrimeVue.Config, {
                theme: {
                    preset: PrimeUIX.Themes.Aura
                }
            });

app.component('p-column', PrimeVue.Column);
app.component('p-inputtext', PrimeVue.InputText);
app.component('p-datatable', PrimeVue.DataTable);

app.mount('#app');
</script>
</head>
<body>
  <div id="app">
    <h1>Phase List</h1>
    <p-datatable :value="phases" editMode="cell" @cell-edit-complete="onCellEditComplete"
      :pt="{
        column: {
        table: { style: 'min-width: 50rem' },
            bodycell: ({ state }) => ({
                class: [{ '!py-0': state['d_editing'] }]
            })
        }
    }">
      <p-column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
        <template #body="{ data, field }">
            [[ data[field] ]]
        </template>
        <template #editor="{ data, field }">
            <template>
                <p-inputtext v-model="data[field]" autofocus fluid />
            </template>
        </template>
      </p-column>
    </p-datatable>

    <input type="button" value="Refresh" @click="fetchData()" />
  </div>
</body>
</html>