Apakah yang perlu saya lakukan jika jadual dalam AntDesign Vue tidak boleh diedit? (rekodkan penyelesaian)-View.js-php.cn

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

青灯夜游

Lepaskan： 2021-12-20 11:44:01

ke hadapan

3284 orang telah melayarinya

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

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

Ia mesti dibuat responsif!

Data tatasusunan

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

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

Salin selepas log masuk

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

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

Salin selepas log masuk

Dilampirkan kod jadual pembukaan untuk rujukan anda

Versi penuh sampel jadual penyuntingan Ant Design Vue sebenarnya menggunakan ref

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



<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>

Salin selepas log masuk

[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!