AntDesign Vue의 테이블을 편집할 수 없으면 어떻게 해야 합니까? (해결책을 기록하다)

Ant Design Vue의 테이블을 편집할 수 없으면 어떻게 해야 하나요? 다음 Vue.js 칼럼에서는 테이블 편집이 되지 않는 문제에 대한 해결 방법을 기록하여 여러분께 공유해드리도록 하겠습니다.

Ant Design Vue 테이블은 편집할 수 없습니다. 해결 방법

간단한 요구 사항: 시퀀스 번호와 같은 테이블의 내용을 직접 편집하세요

그러나 오랫동안 확인한 후에도 여전히 편집할 수 없습니다. 시간이 지나서야 문제를 발견했습니다. 문제는 테이블에 바인딩된 배열 데이터가 응답하지 않는다는 것입니다

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

응답하도록 만들어야 합니다!

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

Ant Design Vue 이전 테이블에 바인딩된 배열 데이터는 ref를 사용하지 않습니다. 이 예제를 적용한 후 테이블을 편집하려면 반드시 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>

Ant Design Vue의 편집 양식 예제 풀 버전은 실제로 ref

[관련 권장 사항: "vue.js tutorial"]

을 사용합니다.

위 내용은 AntDesign Vue의 테이블을 편집할 수 없으면 어떻게 해야 합니까? (해결책을 기록하다)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!