别人的：
封装：
<el-table
:data="tableData"
style="width: 100%"
border
height='500'
max-height='500'
:header-cell-style=" {background:'#5987CF',color:'white',textAlign:'center',lineHeight:'30px',padding:'0'}"
:cell-style="{'text-align':'center','line-height':'20px'}"
>
<!-- 单选多选框插槽 -->
<slot name="chekAll"></slot>
<el-table-column
v-for="item,index in tableTitle"
:key="index"
:prop="item.prop"
:label="item.label"
:width="item.width"
:fixed="item.fixed"
>
<template slot-scope="scope">
<!-- 特殊需求 -->
<slot name="demand" :scope="scope" :item="item"></slot>
</template>
</el-table-column>
</el-table>
使用：
<Table :tableTitle="tableTitle" :tableData="tableData">
<template #chekAll>
<el-table-column type="selection" width="55"></el-table-column>
</template>
<template v-slot:demand="{scope,item}">
<el-input v-if="item.prop == 'sy_jianshu'" v-model="scope.row.prop" />
<el-button v-else-if="item.label == '操作'">删除</el-button>
<span v-else>{
{scope.row[item.prop]}}</span>
</template>
</Table>这是我随便找的一个别人封装的。我自己看着感觉就不太喜欢。因为啥呢？因为使用的时候麻烦得一批。代码较多，正常使用都得带上插槽那部分。。。
自己的：
封装：
<template>
<div class="tab_box">
<div v-if="showTitle" class="title">
{
{ title }}
<slot class="right" name="title_A" :scope="tableData"></slot>
</div>
<el-table
ref="table"
:data="tableData"
border
@selection-change="handleSelectionChange"
style="width: 100%"
>
<el-table-column
v-if="checked"
type="selection"
width="55"
align="center"
>
</el-table-column>
<template v-for="(item, index) in column">
<el-table-column
v-if="item.prop != 'TableAction'"
:key="index"
:prop="item.prop"
:label="item.label"
:width="item.width"
align="center"
>
<template slot-scope="scope">
<slot v-if="item&&item.action" :name="item.prop" :scope="scope"></slot>
<span v-else>{
{scope.row[item.prop]}}</span>
</template>
</el-table-column>
<el-table-column
v-else
:key="index"
:label="item.label"
:width="item.width"
align="center"
>
<template slot-scope="scope">
<slot name="action" :scope="scope"></slot>
</template>
</el-table-column>
</template>
</el-table>
<!-- 分页 -->
<Pagination
:pagination="pagination"
@sizeChange="sizeChange"
@currentChange="currentChange"
/>
</div>
</template>
<script>
import Pagination from "@/components/common/Pagination.vue";
export default {
name: "PublicTable",
components: {
Pagination
},
props: {
title: {
// 标题，默认为空
type: String,
default: ""
},
showTitle: {
// 是否显示表格上方标题，默认不显示
type: Boolean,
default: false
},
checked: {
// 是否能够多选
type: Boolean,
default: false
},
tableData: {
// 表格数据
type: Array,
default: () => []
},
pagination: {
type: Object,
default: () => ({
pageIndex: 1,
pageSize: 10,
total: 0
})
},
column: {
// 表头设定，egg：{ prop: 'date', label: '日期',width：900 }
type: Array,
default: () => []
}
},
data() {
return {
};
},
created() {},
methods: {
sizeChange(value) {
// 大小改变
this.$emit("sizeChange", value);
},
currentChange(value) {
// 改变当前页
this.$emit("currentChange", value);
},
handleSelectionChange(val) {
// 勾选动作
if (this.checked) {
this.$emit("handleSelectionChange", value);
}
}
}
};
</script>
<style lang="less" scoped>
.tab_box {
background: white;
.title {
margin: 10px;
padding-left: 10px;
padding-top: 10px;
&::before {
content: "";
display: inline-block;
width: 4px;
height: 12px;
background: blue;
// vertical-align: middle;
}
}
}
/deep/.el-pagination {
white-space: nowrap;
padding: 2px 5px;
color: #303133;
font-weight: bold;
text-align: right;
}
.right {
float: right;
}
</style>
使用：
<public-table
:showTitle="true"
:title="'合同列账状态统计图'"
:tableData="tableData"
:column="column"
:checked="false"
:pagination="pagination"
@sizeChange="sizeChange"
@currentChange="currentChange"
>
<!-- 不是对最后操作行操作，用这个，column加上action，不需要操作，不加下面这个,slot为当前的prop -->
<template slot="name" slot-scope="{scope}">
<span style="color:blue;" @click="delete_scope(scope)">{
{scope.row.name}}</span>
</template>
<template slot="date" slot-scope="{scope}">
<span style="color:red;" @click="delete_scope(scope)">{
{scope.row.date}}</span>
</template>
<template slot="action" slot-scope="{scope}">
<el-button @click="delete_scope(scope)">删除</el-button>
</template>
</public-table>别人封的我没用过，实际效果不予置评，我自己的有个别没用的地方请自行忽略修改，少了地方自从添加，应该不难的，我相信你。封装的页面还有可以优化的地方，懒得弄了。有兴趣的可以改改。哦对了，再把数据搞出来吧，免得有些小兄弟云里雾里。
tableData: [
{
date: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄弄",
zip: 200333
},
{
date: "2016-05-02",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-04",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-01",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
}
],
const column = [
{ prop: "date", label: "日期",action:true },
{ prop: "name", label: "名字",action:true },
{ prop: "address", label: "地址" },
{ prop: "TableAction", label: "操作" }
];哦，对了，突然发现分页也是封装好的，代码如下：
<template>
<div class="table-pagination">
<el-pagination
:current-page="pagination.pageIndex"
:page-sizes="[10, 20, 30, 40]"
:page-size="pagination.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pagination.total"
@size-change="sizeChange"
@current-change="currentChange"
background
>
</el-pagination>
</div>
</template>
<script>
export default {
name: 'Pagination',
props: {
pagination: {
type: Object,
default: function () {
return {}
}
}
},
data () {
return {
}
},
methods: {
sizeChange (value) {
this.$emit('sizeChange', value)
},
currentChange (value) {
this.$emit('currentChange', value)
}
}
}
</script>
<style scoped>
</style>
一样的道理，缺陷肯定是有的，改改用用吧