elementUI中el-table定义行序号--隐藏ID供后台调用

//模板
<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: '配备温度监控系统'
		} 
	]
}
上一篇:MTK添加自动增加的版本号到build.prop


下一篇:spark sql 读取kudu表向sqlserver数据库中插入70万条数据