element-ui 동적 헤더 렌더링 표

1946 단어
ElementUI 공식 문서에서 기술된 동적 렌더링은 단순히 알 수 있는 필드 이름의 JSON 데이터를 prop 속성을 통해 페이지에 채우고 아래에 공식 문서 내용으로


  
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '   ',
            address: '           1518  '
          }, {
            date: '2016-05-04',
            name: '   ',
            address: '           1517  '
          }, {
            date: '2016-05-01',
            name: '   ',
            address: '           1519  '
          }, {
            date: '2016-05-03',
            name: '   ',
            address: '           1516  '
          }]
        }
      }
    }
  

그 중에서 표의 키 값은 모두 고정되어 있다.그러나 키 값이 고정되지 않은 json 데이터의 렌더링에 대해 공식 문서는 명확한 정보를 주지 않았다.최근 프로젝트를 작성할 때 관련된 요구 사항 중 하나는 백엔드에서 요청한 json 데이터를 페이지에 렌더링하는 것입니다. 그러나 키 값이 고정되어 있지 않아서 공식 문서가 제시한 방식에 따라 직접 렌더링을 할 수 없습니다.
다음 실례는 데이터 데이터 schema에 따라 표를 동적으로 만드는 방법입니다. 그 중에서 헤더와 데이터list의 데이터는 백엔드를 통해 얻을 수 있으며, 더 나아가 표의 동적 생성을 실현할 수 있다

 
      export default {
      data() {
            return {
                header:["column1","column2", "column3"],
                data_list:[
                    [1, 2, 3],
                    [4,5,6]
                ]
            }
        }
    }
 

좋은 웹페이지 즐겨찾기