This package is the package of the table, which is easy to use. Since the project uses Mixins, it is integrated and can be used directly. The part that reports the error can be removed by removing the mixins.
Divided into two parts: one encapsulated table, one demo
<template>
<div id="tableList">
<el-table :data="dataList" v-loading="dataListLoading" size="medium" @cell-click="cellClick" @row-click="rowClick" @row-dblclick="rowdbClick" @selection-change="handleSelectChange" @sort-change="handleSortChange" :height="comOptions.height" :border="comOptions.border" :fit="comOptions.fit" :stripe="comOptions.stripe">
<template v-for="(v,k) in headerData">
<!-- 处理slot -->
<slot :name="v.name||'custom'" v-if="v.type=='custom'"></slot>
<!-- 是否展示序列号 -->
<el-table-column v-if="v.type==='index'" type="index" :label="v.label" :key="`${v.label+k}`" :index="indexMethod" :sortable="v.sortable" :header-align="headerAlign" :align="align"></el-table-column>
<!-- 是否多选 -->
<el-table-column v-if="v.type==='selection'" :key="`${v.label+k}`" type="selection" :header-align="headerAlign" :align="align"></el-table-column>
<!-- 常规列数据 -->
<el-table-column :class-name="v.className" :label="v.label" :width="v.width" v-if="!v.type" :key="`v.label${k}`" :sortable="v.sortable" :formatter="v.format" :prop="v.prop" :show-overflow-tooltip="v.showTooltip" :header-align="headerAlign" :align="align">
</el-table-column>
<!-- tag数据列 -->
<el-table-column :label="v.label" class-name="bageClass" :width="v.width" v-if="v.type=='tag'" :key="`v.label${k}`" :formatter="v.format" :header-align="headerAlign" :align="align">
<template slot-scope="scope">
<el-tag v-for="(item,index) in scope.row[v.prop]" :key="`item.label${index}`" :type="item.type">{{item.label}}</el-tag>
</template>
</el-table-column>
<!-- 图片数据列 -->
<el-table-column :label="v.label" :width="v.width" v-if="v.type=='image'" :key="`v.label${k}`" :header-align="headerAlign" :align="align">
<template slot-scope="scope" :formatter="v.format">
<img class="cell-img" :src="scope.row[v.prop]" :formatter="v.format" alt="">
</template>
</el-table-column>
<!-- 处理type=operation，自定义按钮 -->
<el-table-column :label="v.label" :width="v.width" v-if="v.type=='operation'" :formatter="v.format" :key="`v.type${k}`" :header-align="headerAlign" :align="align">
<!-- 处理自定义操作中的按钮 -->
<!-- type可选值 primary / success / warning / danger / info -->
<!-- 操作权限 判断--要么没有用户权限，要么没有数据权限，都不展示 -->
<template slot-scope="scope">
<template v-for="(item,index) in v.operationData">
<el-link v-if='(!item.permissionData||$hasPermission(item.permissionData))&&(!item.showBtn||(item.showBtn&&item.showBtn(scope.row)))' :underline="false" :key="`item.label${index}`" :size="item.size||'mini'" class="operateLink" :type="item.type||'primary'" @click="operateEvent(item,index,scope.row)">{{item.label}}</el-link>
</template>
</template>
</el-table-column>
</template>
</el-table>
<div class="block" v-if="comOptions.pagination">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="comPagination.currentPage" :page-sizes="comPagination.pageSizes" :page-size="comPagination.pageSize" :layout="comPagination.layout" :total="comPagination.total">
</el-pagination>
</div>
</div>
</template>
<script>
/**
*
* @param dataList:Array 必传，table数据(直接传mixins中的dataList,父组件不需要再定义)
* @param headerData:Array 必传，头部lable数据和prop(父组件要定义的字段)
* headerData:[{prop:'',label:'',type:'',format:(data)=>{}}]
* lebel:值名称 prop:值字段 type:值类型
* type:index 序列号
* selection 多选
* image 图片数据列
* tag 标签数据列
* custom slot数据列
* * operation 操作数据列 =》 showBtn字段用于判断页面数据权限 permissionData用于判断用户权限
* 默认不传 普通数据列
* format:(data)=>{ return data.status==1?'是':'否'} 数据格式化
* @param pagination Object 必传 分页数据 (由于分页的方法集成在了mixins中，直接从页面传)
* :pagination="{total:total,currentPage:page,pageSize:limit}"
* @param pageSizeChangeHandle Function 必传 分页事件(直接调用了mixins中的分页方法,父组件不需要再定义方法)
* @pageSizeChangeHandle="pageSizeChangeHandle"
* @param pageCurrentChangeHandle Function 必传 分页事件(直接调用了mixins中的分页方法,父组件不需要再定义方法)
* @pageCurrentChangeHandle="pageCurrentChangeHandle"
* @param operateEvent Function 非必传 操作列事件(父组件需要定义方法)
* @operateEvent="operateEvent"
*
* @param align 可选值 left center right
* @param headerAlign 可选值 left center right
* tips:详见默认格式
*/
/**
* 分页相关传参，由于全局混入mixins
* 只有在html标签中传参 :pagination="{total:total,currentPage:page,pageSize:limit}"
*/
export default {
name: "tableList",
props: {
align: {
type: String,
default: "center"
},
headerAlign: {
type: String,
default: 'center'
},
dataListLoading: { type: Boolean, defaulte: true },
dataList: {
type: Array,
require: true,
default: () => [],
},
options: {
type: Object,
default: () => { },
},
pagination: {
type: Object,
default: () => { },
},
headerData: {
type: Array,
require: true,
default: () => {
return [
{ label: "日期", prop: "date" },
{ label: "姓名", prop: "name" },
{ label: "地址", prop: "address" },
{
label: "头像",
prop: "image",
type: "image",
width: "120",
},
{
label: "操作",
type: "operation",
operationData: [
{ label: "编辑", value: "edit", showBtn: data => { return data } },
{ label: "删除", value: "delete", type: "danger" },
{ label: "详情", value: "detail", type: "primary" },
],
},
];
},
}
},
computed: {
comOptions() {
return Object.assign({
stripe: true, //boolean 斑马纹
border: true, //boolean 纵向边框
size: "medium", //String medium / small / mini table尺寸
fit: true, //自动撑开
pagination: true, //是否有分页
}, this.options)
},
comPagination() {
return Object.assign({
currentPage: 1,
pageSizes: [10, 20, 30, 50, 100],
pageSize: 30,
layout: "total, sizes, prev, pager, next, jumper",
total: 0,
}, this.pagination)
}
},
data() {
return {};
},
mounted() {
},
methods: {
cellClick(row, column, cell, event) { },
rowClick(row, column, cell, event) {
this.$emit("rowClick", row, column, cell, event);
},
rowdbClick(row, column, event) {
this.$emit("rowdbClick", row, column, event);
},
edit(index, row) { },
// 操作数据列 (当前数据,当前下标，row数据)
operateEvent(item, index, v) {
this.$emit("operateEvent", item, index, v);
},
// 序列号相关
indexMethod(index) {
return index + 1;
},
// 分页相关
handleSizeChange(val) {
this.$emit("pageSizeChangeHandle", val);
},
handleCurrentChange(val) {
this.$emit("pageCurrentChangeHandle", val);
},
// 多选
handleSelectChange(val) {
this.$emit("dataListSelectionChangeHandle", val);
},
// 排序
handleSortChange(val) {
this.$emit("dataListSortChangeHandle")
}
},
};
</script>
<style lang="scss" scoped>
#tableList {
.bageClass {
.cell {
flex-wrap: wrap !important;
}
&:span {
margin: 0 5px 5px 0;
}
}
.cell-img {
width: 80px;
height: 80px;
}
}
</style>
Demo part:
<template>
<div ref="tableListDemo">
<el-card shadow="never" class="aui-card--fill">
<!-- 查询start -->
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.userName" placeholder="姓名" clearable @clear="getDataList()"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="dataForm.userPhone" placeholder="手机号" clearable @clear="getDataList()"></el-input>
</el-form-item>
<el-form-item>
<el-select v-model="dataForm.statusVal" placeholder="状态" clearable @change="getDataList()">
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间" prop="activityTime">
<el-date-picker v-model="dataForm.activityTime" type="daterange" @change="dateChange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">查询</el-button>
</el-form-item>
<el-form-item v-if="$hasPermission('info:goodsbanner:add')">
<el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
</el-form-item>
<el-form-item v-if="$hasPermission('taobao:writeOff:export')">
<el-button type="info" @click="exportHandle()">导出</el-button>
</el-form-item>
</el-form>
<!-- 查询end -->
<!-- table start -->
<table-list :dataList="dataList" :options="{}" :headerData="headerData" :pagination="{total:total,currentPage:page,pageSize:limit,pageSizes:pageSizes}" @pageSizeChangeHandle="pageSizeChangeHandle" @pageCurrentChangeHandle="pageCurrentChangeHandle" @operateEvent="operateEvent">
<el-table-column slot="custom" label="其他">
<!-- <template slot-scope="scope">
<span>{{scope.row.other.userpsw}}</span>
<div>
<el-button size="mini" v-for="(v,k) in scope.row.other.card" :key="k">{{v}}</el-button>
</div>
</template> -->
</el-table-column>
<el-table-column slot="other123" label="其他123">
<!-- <template slot-scope="scope">
<span>{{scope.row.other.userpsw}}</span>
<div>
<el-button size="mini" v-for="(v,k) in scope.row.other.card" :key="k">{{v}}</el-button>
</div>
</template> -->
</el-table-column>
</table-list>
<!-- table end -->
</el-card>
<!-- 新增-修改 -->
<table-list-add-or-update v-if="addOrUpdateVisible" @destroyCom="destroyCom" ref="addOrUpdate" @refreshDataList="getDataList"></table-list-add-or-update>
</div>
</template>
<script>
import mixinViewModule from "@/mixins/view-module";
import tableList from "@/components/tableList";
import tableListAddOrUpdate from "@/views/modules/demo/tableDemoDialog";
export default {
mixins: [mixinViewModule],
components: {
tableList,
tableListAddOrUpdate
},
data() {
return {
//mixins必填参数
mixinViewModuleOptions: {
createdIsNeed: false,
getDataListURL: "/data/store/page",
getDataListIsPage: true,
exportURL: "/star/video/videoExport",
},
// 查询参数字段
dataForm: {
userName: '',
userPhone: '',
statusVal: '',
activityTime: []
},
statusOptions: [{ label: '状态0', value: 0 }, { label: '状态1', value: 1 }, { label: '状态2', value: 2 },],
// 必传参数 表格数据(mixins)
dataList: [
{
id: 999,
name: 'john', age: 20,
img: 'https://static.beautyfarm.com.cn/vip_admin/goodsbanner/2020-12-31/消杀1609380162018.png',
hobby: [{ value: 'baskatball', label: '篮球', type: 'warning' }, { value: 'jump', label: '跳' }, { value: 'sing', label: '唱' }],
desc: '不要问，问就是第一届装杯大赛冠军',
status: 1,
other: {
userpsw: 'dfsafdsa12321',
card: ['黄金卡', '钻石卡', '宝石卡']
},
create_date: '2021-07-12 09:41:24'
},
{
id: 998,
name: 'mary', age: 30,
img: 'https://static.beautyfarm.com.cn/vip_admin/goodsbanner/2020-12-31/消杀1609380162018.png',
hobby: [{ value: 'baskatball', label: '篮球', type: 'warning' }, { value: 'jump', label: '跳' }, { value: 'sing', label: '唱' }],
desc: '不要问，问就是第一届装杯大赛冠军',
status: 1,
other: {
userpsw: 'dfsafdsa12321',
card: ['黄金卡', '至尊卡']
},
create_date: '1881-07-12 09:41:25'
},
{
id: 968,
name: 'sary', age: 30,
img: 'https://static.beautyfarm.com.cn/vip_admin/goodsbanner/2020-12-31/消杀1609380162018.png',
hobby: [{ value: 'baskatball', label: '篮球', type: 'warning' }, { value: 'jump', label: '跳' }, { value: 'sing', label: '唱' }],
desc: '不要问，问就是第一届装杯大赛冠军',
status: 1,
other: {
userpsw: 'dfsafdsa12321',
card: ['黄金卡', '至尊卡']
},
create_date: '2021-05-12 09:41:26'
},
{
id: 198,
name: 'uary', age: 30,
img: 'https://static.beautyfarm.com.cn/vip_admin/goodsbanner/2020-12-31/消杀1609380162018.png',
hobby: [{ value: 'baskatball', label: '篮球', type: 'warning' }, { value: 'jump', label: '跳' }, { value: 'sing', label: '唱' }],
desc: '不要问，问就是第一届装杯大赛冠军',
status: 1,
other: {
userpsw: 'dfsafdsa12321',
card: ['黄金卡', '至尊卡']
},
create_date: '2021-07-06 09:41:23'
},
],
// 必传参数 表头数据
headerData: [
{ label: '序列号', prop: '', type: 'index' }, //index
{ label: 'id', prop: 'id', sortable: true }, //index
{ label: '姓名', prop: 'name', width: 90, sortable: true },
{ label: '头像', prop: 'img', type: 'image', width: 120 }, //image
{ label: '年龄', prop: 'age' },
{ label: '爱好', prop: 'hobby', type: 'tag' }, //tag
{ label: '状态', prop: 'status', format: (data => { return data.status == 1 ? '健康' : '不健康' }) },
{ label: '描述', prop: 'desc', showTooltip: true },
{ label: '其他', prop: 'other', type: 'custom' }, //具名插槽 默认'custom'
{ label: '', prop: '', type: 'custom', name: 'other123' }, //具名插槽
{ label: '创建时间', prop: 'create_date', sortable: true },
{ label: '操作', prop: '', type: 'operation', operationData: [{ value: 'edit', label: '编辑', permissionData: '' }, { value: 'delete', label: '删除', type: 'danger' }] },
]
}
},
methods: {
// 操作列事件
operateEvent(item, index, row) {
if (item.value === 'edit') {
this.addOrUpdateHandle(row.id) //调用mixins中的方法
return console.log('编辑')
}
if (item.value === 'delete') {
return console.log('删除')
}
},
dateChange(e) {
this.dataForm.startDate = e[0]
this.dataForm.endDate = e[1]
}
}
}
</script>
<style>
</style>
{{o.name}}
{{m.name}}