element 封装list

 

List组件

<template>

<div class="m-list">

<el-table stripe

:data="data"

v-loading="loading"

:fit='true'

@row-dblclick="tableConfig.rowDblclick"

@row-click="tableConfig.rowClick"

@selection-change="tableConfig.selectionChange"

border>

<el-table-column v-if="tableConfig.mutiSelect"

type="selection"

style="width: 55px;">

</el-table-column>

<!--region 数据列-->

<template v-for="(column, index) in columns">

<!-- slot 添加自定义配置项 -->

<slot v-if="column.slot"

:name="column.slot"></slot>

 

<!-- 默认渲染列 -->

<el-table-column v-else

:prop="column.prop"

:key='column.label'

:label="column.label"

:align="column.align"

:width="column.width"

:show-overflow-tooltip="true">

<template slot-scope="scope">

<template v-if="!column.render">

<template v-if="column.formatter">

<span v-html="column.formatter(scope.row, column)"></span>

</template>

<template v-else>

<span>{{scope.row[column.prop]}}</span>

</template>

</template>

<template v-else>

<ex-slot :column="column"

:row="scope.row"

:render="column.render"

:index="index">

</ex-slot>

</template>

</template>

</el-table-column>

</template>

</el-table>

<el-pagination v-if="!tableConfig.hidePage"

@size-change="tableConfig.onPagesizeChange"

@current-change="tableConfig.onPageChange"

:current-page="searchKey.pageIndex"

layout="total, sizes, prev, pager, next, jumper"

:page-size="searchKey.pageSize"

:page-sizes='pageSizes'

:total="getTotalCount"></el-pagination>

</div>

</template>

 

<script>

var exSlot = {

functional: true,

props: {

row: Object,

render: Function,

index: Number,

column: {

type: Object,

default: null

}

},

render: (h, data) => {

const params = {

row: data.props.row,

index: data.props.index

}

if (data.props.column) params.column = data.props.column

return data.props.render(h, params)

}

}

export default {

components: { exSlot },

props: {

loading: {

type: Boolean,

default () {

return false;

}

},

height: {

type: Number,

default () {

return this.autoHeight;

}

},

data: {

type: Array,

default () {

return [];

}

},

columns: {

type: Array,

default () {

return [];

}

},

tableConfig: {

type: Object,

default () {

return {

rowDblclick: () => { },

rowClick: () => { },

selectionChange: () => { },

onPagesizeChange: () => { },

onPageChange: () => { },

};

}

},

searchKey: {

type: Object,

default () {

return {};

}

}

},

data () {

return {

autoHeight: 400,

pageSizes: [10, 20, 50, 100, 200]

}

},

computed: {

getTotalCount () {

return this.tableConfig.totalCount || 0;

}

}

}

</script>

 

<style scoped>

</style>

<style >

.m-list .el-table th.gutter {

display: table-cell !important;

}

.m-list .el-table colgroup.gutter {

display: table-cell !important;

}

</style>

 

 

demo

 

<template>

<div>

<List :data="data"

:tableConfig='tableConfig'

:columns='columns'

:loading="loading"

:searchKey:='searchKey'>

</List>

</div>

</template>

 

<script>

import List from "../../components/List"

export default {

components: { List },

data () {

return {

loading: false,

data: [{

qxdj: '一般',

ssxl: '111'

}, {

qxdj: '一般',

ssxl: '111'

}, {

qxdj: '一般',

ssxl: '111'

}],

columns: [

{

label: 'id',

prop: 'ssxl',

align: 'center',

},

{

label: '异常描述',

prop: 'ssxl',

align: 'center',

},

{

label: '发生时间',

prop: 'ssxl',

align: 'center',

},

{

label: '等级',

prop: 'qxdj',

align: 'center',

render: (h, params) => {

let dj = params.row.qxdj;

let style = {};

if (dj == '一般') {

style.color = '#00fffc';

} else if (dj == '重大') {

style.color = '#ff5816';

} else if (dj == '紧急') {

style.color = '#ffc000';

}

return h('div', {

style: style

}, params.row.qxdj)

}

}

 

],

tableConfig: {

border: true,

mutiSelect: false,

totalCount: 100,

rowDblclick: () => { },

rowClick: () => { },

selectionChange: () => {

},

onPagesizeChange: (pageSize) => {

this.searchKey.pageSize = pageSize;

this.loadData();

},

onPageChange: (pageIndex) => {

this.searchKey.pageIndex = pageIndex;

this.loadData();

 

}

},

searchKey: {

pageSize: 10,

pageIndex: 1

}

};

},

created () {

 

},

 

methods: {

loadData () {

let that = this;

this.loading = true;

setTimeout(() => {

this.loading = false;

}, 2000);

}

}

};

</script>

<style scoped>

</style>