슬롯 분할 문제를 사용하는 요소 UI 테이블 열 "정의되지 않은 속성 'column_name'을 읽을 수 없습니다"

슬롯 분할 문제를 사용하는 요소 UI 테이블 열 "정의되지 않은 속성 'column_name'을 읽을 수 없습니다"

여기에 요소 UI 프레임워크를 사용하는 사람이 있습니까?https://element.eleme.io/ #/en-US/

테이블 컴포넌트와 컬럼에 슬롯 스코프를 사용하고 있습니다.물론 패키지를 업데이트 하는 npm 업데이트를 실행할 때까지 정상적으로 동작하고 있습니다.콘솔에는 오류가 많이 있습니다.나중에 테이블 컬럼의 슬롯 스코프가 문제의 원인이라는 것을 알게 되었습니다.

어떤 도움이라도 주시면 감사하겠습니다.여기 그 문제의 요점이 있다.

https://jsfiddle.net/japhfortin/jkzma0v8/3/

  <el-table :data=list>
    <el-table-column label="First Name">
      <template slot-scope="scope">{{ scope.row.first_name }}</template>
    </el-table-column>
    <el-table-column prop="last_name" label="Last Name">
    </el-table-column>
  </el-table>

  data() {
    return {
      input: '',
      list: [
      {
        first_name: 'Foo',
        last_name: 'Bar'
      }
      ]
    }
  },

에러가 발생하는 이유는 값이scope는 첫 번째 렌더링의 빈 객체입니다.즉, 오브젝트 행은 정의되어 있지 않습니다.체크해 주세요.row값은 액세스 전에 정의됩니다.대체 형식을 사용하여 값을 열에 바인딩할 수도 있습니다.사용 사례에 따라 다릅니다.

<el-table :data="list">
  <el-table-column prop="first_name" label="First Name"> </el-table-column>
  <el-table-column prop="last_name" label="Last Name"> </el-table-column>
</el-table>

를 사용할 수도 있습니다.v-if에서scope.row렌더링 시 값이 존재하는지 확인합니다.

<el-table :data="list">
  <el-table-column label="First Name">
    <template slot-scope="scope" v-if="scope.row">
      {{ scope.row.first_name }}
    </template>
  </el-table-column>
  <el-table-column prop="last_name" label="Last Name"> </el-table-column>
</el-table>

이 문제는 Vue의 새 슬롯 구문 때문에 발생합니다.상세한 것에 대하여는, https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md 를 참조해 주세요.

텍스트가 있는 기본 슬롯

<!-- old -->
<foo>
    <template slot-scope="scope">
        {{ scope}}
    </template>
</foo>

<!-- new -->
<foo v-slot="scope">
    {{ scope}}
</foo>

UI 요소의 Table 구성 요소를 사용하는 또 다른 예제입니다.

참고: Vue를 최신 버전(현재 2.6.3)으로 업그레이드하십시오.

<el-table :data="list">
    <el-table-column label="First Name" v-slot="scope">
        {{ scope.row.first_name }}
    </el-table-column>
    <el-table-column prop="last_name" label="Last Name">
    </el-table-column>
</el-table>

이 문제는 Vue@2.6.3에서 해결되었습니다.

언급URL : https://stackoverflow.com/questions/54534377/element-ui-table-column-that-uses-slot-scope-issue-cannot-read-property-column