//模板
<div class="table_cpt">
<template>
<slot name='head_wrapper'></slot>
</template>
<el-table id='out_table' ref="multipleTable" :data="tableData.list" style="width:100%"
:header-cell-style="tableHeaderColor" @selection-change="handleSelectionChange" border
:height="tableData.height" highlight-current-row>
<el-table-column type="selection" width="55" v-if="clickFlag">
</el-table-column>
<!-- 循环表头-->
<template v-for="(item) in tableData.t_head" >
<!-- type=index是表面当前列是显示序号, indexMethod是定义序号的计算方式-->
<el-table-column v-if="item.prop==='id'" :label="item.label"
type="index"
:index="indexMethod"
:key="item.prop"
>
</el-table-column>
<el-table-column v-else-if="item.prop!=='id'" :prop="item.prop" :key="item.prop" :label="item.label">
</el-table-column>
<!-- <el-table-column :prop="item.prop" :key="index" :label="item.label">
</el-table-column> -->
</template>
<slot name='edit_container'></slot>
</el-table>
<template>
<slot name='foot_wrapper'></slot>
</template>
</div>
//数据格式
tableData: {
current_page: 1, // 当前页数
total_page: 0, // 表里包含多少行数据
column_w: '100px',
t_head: [{
prop: 'ID', //当前列的key
label: '序号' //当前列的表头
},
{
prop: 'name', //当前列的key
label: '名称' //当前列的表头
}, {
prop: 'guige', //当前列的key
label: '规格' //当前列的表头
}, {
prop: 'quantity', //当前列的key
label: '数量' //当前列的表头
}, {
prop: 'yinjingruku', //当前列的key
label: '引进/入库' //当前列的表头
}, {
prop: 'leibie', //当前列的key
label: '类别' //当前列的表头
}, {
prop: 'baocunxingshi', //当前列的key
label: '保存形式' //当前列的表头
}, {
prop: 'fenlei', //当前列的key
label: '分类' //当前列的表头
}, {
prop: 'yongtu', //当前列的key
label: '用途' //当前列的表头
}, {
prop: 'shiyantiaojianxvqiu', //当前列的key
label: '实验条件需求' //当前列的表头
}, {
prop: 'guanlibumen', //当前列的key
label: '管理部门' //当前列的表头
}, {
prop: 'zerenren', //当前列的key
label: '责任人' //当前列的表头
}, {
prop: 'cunfangweizhi', //当前列的key
label: '存放位置' //当前列的表头
}, {
prop: 'baocangshebei', //当前列的key
label: '保藏设备' //当前列的表头
}, {
prop: 'beizhu', //当前列的key
label: '备注' //当前列的表头
}
],
list: [
{
ID: 1,
name: 'xx病毒',
guige: '1ml/支',
quantity: '10支',
yinjingruku: '####',
leibie: '菌毒种',
baocunxingshi: '细胞',
fenlei: '二级',
yongtu: '科研',
shiyantiaojianxvqiu: 'BSL-3',
guanlibumen: 'XXX研究室',
zerenren: 'xxx',
cunfangweizhi: 'x楼二层x房',
baocangshebei: '-80°c冰箱',
beizhu: '配备温度监控系统'
}
]
}