Apakah yang perlu saya lakukan jika jadual dalam AntDesign Vue tidak boleh diedit? (rekodkan penyelesaian)

Apakah yang perlu saya lakukan jika jadual dalam Ant Design Vue tidak boleh diedit? Lajur Vue.js berikut akan merakam dan berkongsi dengan anda penyelesaian kepada masalah bahawa jadual tidak boleh diedit saya harap ia akan membantu semua orang.

Jadual Ant Design Vue tidak boleh diedit penyelesaian

Keperluan mudah: edit terus kandungan dalam jadual, seperti nombor urutan

Ia mesti dibuat responsif!

Data tatasusunan

yang terikat pada jadual sebelumnya dalam Ant Design Vue tidak menggunakan ref

const data = [
    { key: '1', name: 'John Brown', age: 32 },
    { key: '2', name: 'Jim Green', age: 42 },
    { key: '3', name: 'Joe Black', age: 33 },
  ];

Jika anda ingin mengedit jadual selepas menggunakan contoh ini, anda mesti ingat untuk menambah Hidup ref

const data = ref([
    { key: '1', name: 'John Brown', age: 32 },
    { key: '2', name: 'Jim Green', age: 42 },
    { key: '3', name: 'Joe Black', age: 33 },
  ]);

Dilampirkan kod jadual pembukaan untuk rujukan anda

Versi penuh sampel jadual penyuntingan Ant Design Vue sebenarnya menggunakan ref

<script>
  import { defineComponent, ref } from &#39;vue&#39;;
  const columns = [
    { title: &#39;序号&#39;, dataIndex: &#39;key&#39;},
    { title: &#39;表单名称&#39;, dataIndex: &#39;name&#39; },
    { title: &#39;顺序号&#39;, dataIndex: &#39;age&#39;, slots: { customRender: &#39;age&#39;} },
  ];
  const data = ref([
    { key: &amp;#39;1&amp;#39;, name: &amp;#39;John Brown&amp;#39;, age: 32 },
    { key: &amp;#39;2&amp;#39;, name: &amp;#39;Jim Green&amp;#39;, age: 42 },
    { key: &amp;#39;3&amp;#39;, name: &amp;#39;Joe Black&amp;#39;, age: 33 },
  ]);

  export default defineComponent({
    name: "FormConfiguration",
    setup() {
      return {
        columns,
        data,
      }
    }
  })
</script>

[Cadangan berkaitan: "

tutorial vue.js

"]

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika jadual dalam AntDesign Vue tidak boleh diedit? (rekodkan penyelesaian). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!