Ele.me의 테이블 컴포넌트는 매우 강력하고 기본적으로 프로젝트의 다양한 테이블에 충분하지만...컬럼 단위로 작업하는 것이 익숙하지 않습니다. 그래서 다른 방식으로 변경되었습니다. 이 글은 Table 컴포넌트를 재사용하기 위한 샘플 코드를 작성하기 위한 VUE element-ui를 주로 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.
프로젝트에는 테이블이 많기 때문에 재사용성이 가장 중요합니다.
1단계
먼저 기본 테이블을 보여드리겠습니다.
공식 예제의 tableData
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 弄' }]
table.vue
<template> <el-table :data="tableData" border> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template>
2단계
테이블 단순화:
//table.vue <template> <el-table :data="tableData" border> <el-table-column v-for="(item,key) in tableKey" :key="key" :prop="item.value" :label="item.name"></el-table-column> </el-table> </template> <script> export default{ name: 'table', data(){ return{ tableData:[...], tableKey: [{ name: 'date', value: '日期' },{ name: '姓名', value: 'name' },{ name: '地址', value: 'address' }] } } } </script>
3단계
table.vue를 재사용하려면 데이터를 제공하고 내 필드 이름을 지정해야 합니다.
새 상위 구성 요소 sl_table.vue
//sl_table.vue <template> <sl-table :tableData="tableData" :tableKey="tableKey"></sl-table> </template> <script> import Table from '@/components/table' export default{ name: 'sl-table', data(){ return { tableData: [...] tableKey: [{ name: 'date', value: '日期' },{ name: '姓名', value: 'name' },{ name: '地址', value: 'address' }] } }, components: { 'sl-table': Table } } </script>
table을 만드는 것이 더 간단합니다.
//table.vue <template> <el-table :data="tableData" border> <el-table-column v-for="(item,key) in tableKey" :key="key" :prop="item.value" :label="item.name"></el-table-column> </el-table> </template> <script> export default{ name: 'table', data(){ return{ } }, props:['tableData','tableKey'], } </script>
4단계
필요에 따라 테이블의 형태를 수정할 수 있습니다.
열 너비
이것은 비교적 간단합니다. 속성을 직접 추가할 수 있습니다
//sl_table.vue ... data(){ return { tableData: [...] tableKey: [{ name: 'date', value: '日期', width: 80 },{ name: '姓名', value: 'name', width: 80 },{ name: '地址', value: 'address' }] } }, ...
table.vue
//table.vue ... <el-table-column v-for="(item,key) in tableKey" :key="key" :prop="item.value" :label="item.name" :width="item.width"></el-table-column> ...
사용자 정의 템플릿 열
구성 요소에 사용자 정의 열을 알려야 하는 경우 Operate
table.vue
<el-table-column v-for="(item,key) in tableKey" v-if="!item.operate" :key="key" :prop="item.value" :label="item.name" :width="item.width"></el-table-column> <!-- 自定义 --> <el-table-column v-else> <template scope="scope"> <slot :name="item.value" :$index="scope.$index" :row="scope.row"></slot> </template> </el-table-column> //sl_table.vue <sl-table :tableData="tableData" :tableKey="tableKey"> <template slot="date" scope="scope"> <span>{{ scope.row.date | DateFilter }}</span> </template> </sl-table> ... data(){ return { tableData: [...] tableKey: [{ name: 'date', value: '日期', operate: true },{ name: '姓名', value: 'name', operate: false },{ name: '地址', value: 'address', operate: false }] } }, filters: { DateFilter(){...} } ...
테이블 확장 행
을 추가하세요.
sl_table.vue가 isExpand 속성을 전달하는 한 너비와 유사합니다. 다음은 한 번에 한 행만 확장할 수 있는 효과입니다.
//sl_table.vue <sl-table :tableData="tableData" :tableKey="tableKey" :isExpand="true" :isExpandOnly="true"> <template slot="expand" scope="scope"> {{...expand something}} </template> ... </sl-table>
table.vue
//table.vue <el-table :data="tableData" border @expand="handleExpand" ref="raw_table"> <el-table-column v-if="isExpand" type="expand"> <template scope="scope"> <slot name="expand" :$index="scope.$index" :row="scope.row"></slot> </template> </el-table-column> </el-table> ... props: ['tableData','tableKey','isExpand','isExpandOnly'], methods: { handleExpand(row,is_expand){ if(this.isExpand && this.isExpandOnly){ this.$refs.raw_table.store.states.expandRows = expanded ? [row] : [] } } }
다른(정렬, 다중 선택) 작업도 비슷하게 추가됩니다. . . 자세히 설명할 필요가 없습니다.
관련 권장사항:
tables_CSS tutorial_CSS_웹 페이지 제작을 사용하여 5가지 공통 레이아웃을 구현하는 방법에 대한 CSS 예
테이블의 cellStyle에 대한 bootstrap 및 포맷터 문제
위 내용은 VUE element-ui를 사용하여 재사용 가능한 테이블 구성 요소 작성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!