點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁(yè) - 科技 - 知識(shí)百科 - 正文

VUE element-ui 寫個(gè)復(fù)用Table組件的示例代碼

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:25:29

VUE element-ui 寫個(gè)復(fù)用Table組件的示例代碼

VUE element-ui 寫個(gè)復(fù)用Table組件的示例代碼:餓了么的table組件功能很強(qiáng)大，對(duì)于項(xiàng)目中的各種表格基本夠用，但是……個(gè)人對(duì)于它以列為單位的操作不習(xí)慣 =。=所以改成了另一種方式（我不會(huì)告訴你其實(shí)本質(zhì)沒變）。項(xiàng)目中表格較多，所以復(fù)用性最重要步驟一先來個(gè)基本的表格展示官例的tableDat

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀VUE element-ui 寫個(gè)復(fù)用Table組件的示例代碼:餓了么的table組件功能很強(qiáng)大，對(duì)于項(xiàng)目中的各種表格基本夠用，但是……個(gè)人對(duì)于它以列為單位的操作不習(xí)慣 =。=所以改成了另一種方式（我不會(huì)告訴你其實(shí)本質(zhì)沒變）。項(xiàng)目中表格較多，所以復(fù)用性最重要步驟一先來個(gè)基本的表格展示官例的tableDat

餓了么的table組件功能很強(qiáng)大，對(duì)于項(xiàng)目中的各種表格基本夠用，但是……個(gè)人對(duì)于它以列為單位的操作不習(xí)慣 =。=所以改成了另一種方式（我不會(huì)告訴你其實(shí)本質(zhì)沒變）。

項(xiàng)目中表格較多，所以復(fù)用性最重要

步驟一

先來個(gè)基本的表格展示

官例的tableData

tableData: [{
 date: '2016-05-02',
 name: '王小虎',
 address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
 date: '2016-05-04',
 name: '王小虎',
 address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
 date: '2016-05-01',
 name: '王小虎',
 address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
 date: '2016-05-03',
 name: '王小虎',
 address: '上海市普陀區(qū)金沙江路 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>

步驟二

簡(jiǎn)化一下表格：

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

步驟三

復(fù)用table.vue就是————給它數(shù)據(jù)的同時(shí)告訴它我的字段名唄

新建一個(gè)父組件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.vue就更簡(jiǎn)單了

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

步驟四

可以根據(jù)需求修改table的形式

列寬度

這個(gè)較為簡(jiǎn)單，可以直接加個(gè)屬性

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

自定義模板列

如果我們需要告訴組件哪個(gè)是自定義的列，所以添加一個(gè)屬性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傳入一個(gè)isExpand的屬性。這里加個(gè)每次只能展開一行的效果：

//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] : [] 
 }
 }
}

其他的（排序、多選）操作也是類似添加。。多不贅述。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

VUE element-ui 寫個(gè)復(fù)用Table組件的示例代碼

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽： VUE table組件 element-ui

熱門焦點(diǎn)

VUE element-ui 寫個(gè)復(fù)用Table組件的示例代碼

VUE element-ui 寫個(gè)復(fù)用Table組件的示例代碼

VUE element-ui 寫個(gè)復(fù)用Table組件的示例代碼

最新推薦

猜你喜歡

熱門推薦