之前封装的是简单的table 但是因为项目需要,需要为table加上多选或行展开功能,就进行了修改
i-table.vue
<template>
<el-table
ref="table"
:data="data"
:show-header="showHeader"
:border="border"
:max-height="maxHeight"
:v-loading="loading"
:class="className"
:row-key="rowKey"
:expand-row-keys="expands"
highlight-current-row
@sort-change="handleSortChange"
@selection-change="handleSelectionChange"
@expand-change="expendDetail"
>
<!-- 展开行 -->
<el-table-column v-if="expand" type="expand" width="40">
<template slot-scope="scope">
<el-form label-position="left" inline class="demo-table-expand" label-width="80px">
<el-form-item
v-for="(item,index) in detilOptions"
:label="item.label + ': '"
:key="index"
>
<span v-if="!item.html&&!item.formatter">{{scope.row[item.prop]}}</span>
<span v-if="!item.html && item.formatter">{{item.formatter(scope.row[item.prop])}}</span>
<span v-html="scope.row[item.prop]" v-if="item.html"></span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<!-- 多选 -->
<el-table-column v-if="selection && !radioShow" type="selection" width="55"></el-table-column>
<!-- 单选 -->
<el-table-column v-if="radioShow && !selection">
<template slot-scope="scope">
<el-radio
class="radio"
v-model="selectedRadio"
:label="scope.row[radioLabel]"
@change.native="getCurrentRow(scope.row)"
> </el-radio>
</template>
</el-table-column>
<!-- 序号 -->
<el-table-column v-if="indexOrNot" label="序号" type="index" :index="indexMethod" width="60"></el-table-column>
<template v-for="colConfig in colConfigs">
<slot v-if="colConfig.slot" :name="colConfig.slot"></slot>
<component v-else-if="colConfig.component" :is="config.component" :col-config="colConfig"></component>
<el-table-column v-else v-bind="colConfig"></el-table-column>
</template>
</el-table>
</template>
<script>
export default {
props: {
colConfigs: {
type: Array,
default: function () {
return []
}
},
data: {
type: Array,
default: function () {
return []
}
},
showHeader: {
type: Boolean,
default: true
},
border: {
type: Boolean,
default: false
},
maxHeight: {
type: [String, Number],
default: null
},
loading: {
type: Boolean,
default: false
},
className: {
type: String,
default: ''
},
rowKey: {
type: String,
default: ''
},
selection: {
type: Boolean,
default: false
},
radioShow: {
type: Boolean,
default: false
},
radioLabel: {
type: String,
default: 'id'
},
expand: {
type: Boolean,
default: false
},
uniqueOpened: {
type: Boolean,
default: true
},
detilOptions: [Array],
indexOrNot: [Boolean],
currentPage: {
type: Number,
default: 1
},
pageSize: {
type: Number,
default: 10
}
},
data() {
return {
selectedRadio: '',
expands: []
}
},
components: {},
computed: {},
watch: {},
created() {},
methods: {
indexMethod(index) {
return index + 1 + (this.currentPage - 1) * this.pageSize
},
handleSelectionChange(val) {
this.$emit('handleSelectionChange', val)
},
getCurrentRow(row) {
this.$emit('radioChange', row)
},
expendDetail(row, expandedRows) {
// 是否只展开一行
if (this.uniqueOpened) {
if (expandedRows.length > 1) {
this.data.forEach(item => {
if (item.id !== row.id) {
this.$refs['table'].toggleRowExpansion(item, false)
}
})
}
}
this.$emit('detailClick', row)
},
handleSortChange(column) {
this.$emit('handleSortChange', column)
}
}
}
</script>
<style>
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>
在组件中使用
import iTable from '@/components/table/i-table'
components: { iTable },
使用
<i-table
:data="userList"
class="table"
:col-configs="colConfigs"
row-key="id"
radioShow
expand
:detilOptions="detilOptions"
radioLable="id"
@handleSortChange="handleSortChange"
@radioChange="radioChange"
>
<el-table-column slot="operate" label="操作">
<template slot-scope="scope">
<el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
<el-button type="text" size="small" @click="deleteUser(scope.row)">删除</el-button>
</template>
</el-table-column>
</i-table>
配置项
colConfigs: [
{
prop: 'name',
label: '姓名'
},
{
prop: 'sex',
label: '性别',
formatter: val => {
//这里的val是row Object
return this.sexFormat(val.sex)
}
},
{ prop: 'birth', label: '出生日期', sortable: true },
{ prop: 'age', label: '年龄' },
{ prop: 'addr', label: '地址' },
{ slot: 'operate' }
],
detilOptions: [
{
prop: 'name',
label: '姓名'
},
{
prop: 'sex',
label: '性别',
formatter: val => {
return this.sexFormat(val)
}
},
{ prop: 'birth', label: '出生日期' },
{ prop: 'age', label: '年龄' },
{ prop: 'addr', label: '地址' }
],
methods
sexFormat(val) {
return val === 0 ? '男' : '女'
},
radioChange(val) {
console.log(val)
},
handleSortChange(val) {
console.log(val)
},