Vue中动态显示表格内容

Vue中动态显示表格内容

在项目中，我们可能会用到表格来显示不同的数据，表格显示数据，无非是列的内容不同，所以，我们可以考虑封装个公共的表格组件，动态得显示不同的数据
实现截图如下：

1.首先在项目中创建一个公共表格组件table.vue，代码如下

<template>
	<!--这里放其他内容，表格等-->
	<el-table :data="tableData" border  style="width: 100%;"
	 v-loading="tableLoading" >
		<el-table-column  align="center" v-for="(th, key) in tableColumnsConfig" :key="key" 
		:prop="th.prop" :label="th.label"
		 :width="th.width"  :show-overflow-tooltip="true" >
			<template slot-scope="scope">
				<div v-if="th.prop==''&&th.type=='index'">
					{{scope.$index+(cpage - 1) * psize + 1}}
				</div>
				<div v-else-if="th.prop==''">
					<el-button  :type="btn.type=='del'?'danger':'primary'" v-for="(btn,index) in th.operate"  size="mini" :key="index" 
					 @click="btnHandle(scope.row,btn.type)">
						{{btn.name}}
					</el-button>
				</div>
				<div v-else>
					<span>{{ scope.row[th.prop] }}</span>
				</div>
			</template>
		</el-table-column>
	</el-table>
</template>
<script>
	export default {
		name: 'refactor_table',
		props: {
			tableData: {
				type: Array,
				default: function() {
					return []
				}
			},
			/**
			 *  设置table 加载icon
			 */
			tableLoading: {
				type: Boolean,
				default: false
			},
			tableColumnsConfig: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		data(){
			return{
				cpage:1,
				psize:10,
			}
		},
		mounted(){
			/* if(this.tableData && this.tableData.length>0){
				this.tableLoading=false;
			} */
			/* console.log(this.tableColumnsConfig); */
		},
		methods: {
			btnHandle(row, type) {
				this.$emit("operateHandle", row, type)
			}
		}
	}
</script>

<style>
	
</style>

2.然后在建一个父组件，引入子组件table.vue，并把动态获取的表格数据传给table.vue

<template>
	
	<div>
		<refactor-table :table-data="tableData" :table-columns-config="tableColumns" 
		:table-loading="loading" @operateHandle="tableOperateHandle">
		</refactor-table>
		<pagination :currentPage="currentPage" :limit="limit" :total="total" :small="small"></pagination>
	</div>
</template>

<script>
	import RefactorTable from './sub/table.vue';
	import Pagination from '@/components/Pagination/index.vue'
	export default {
		data() {
			return {
				loading: false,
				tableHeight: 300,
				tableData: [],
				tableColumns: [
					{
						label: '序号',
						width: '50',
						prop: '',
						type:"index"
					},
					{
						label: '节点id',
						width: '',
						prop: 'id'
					},
					{
						label: '农户名称',
						width: '',
						prop: 'name',
					},
					{
						label: '所属中心店',
						width: '',
						prop: 'grade',
					},
					
				],
				currentPage: 1,
				limit: 10,
				total: 0,
				small: true
			}
		},
		created() {
			this.loadingTable();
		},
		methods: {
			loadingTable() {
				// 初始化table 数据
				this.tableData = [{
						id: '1938238',
						name: '节点',
						grade: 'ERWFD'
					},
					{
						id: '3241',
						name: '节点B',
						grade: 'FDD'
					},
					{
						id: '8238',
						name: '节点C',
						grade: 'FVDFA'
					},
					{
						id: '3424',
						name: '节点',
						grade: 'ERWFD'
					},
					{
						id: '32ree',
						name: '节点B',
						grade: 'FDD'
					},
					{
						id: '821221',
						name: '节点C',
						grade: 'FVDFA'
					},
					{
						id: '89238',
						name: '节点',
						grade: 'ERWFD'
					},
					{
						id: '323432',
						name: '节点B',
						grade: 'FDD'
					},

				];
				
				// 最后增加一列为操作
				this.tableColumns.push({
					prop: '',
					label: '操作',
					width: 280,
					align: 'center',
					operate: [
						{
							type: 'add',
							name: '新增',
						},
						{
							type: 'del',
							name: '删除',
						},
						
					]
				});
			},
			/**
			 * 接收table 组件操作时传入的参数
			 * @param row {object} 所选行
			 * @param type {String} 操作类型（add,del）
			 */
			tableOperateHandle(row, type) {
				console.log(row, type)

			}
		},
		components: {
			RefactorTable,
			Pagination
		},
		//接收子组件值
		handleCurrentChange(cpage) {
			this.currentPage = cpage;

		},
		handleSizeChang(psize) {
			this.limit = psize;
		}
	}
</script>

3.然后就可以实现表格内容动态显示啦~