Vue中如何動態(tài)顯示表格內容

更新時間：2023年10月19日 16:31:05 作者：橙子微笑

這篇文章主要介紹了Vue中如何動態(tài)顯示表格內容問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

實現截圖

如下：

在項目中創(chuàng)建一個公共表格組件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>

在建一個父組件

引入子組件table.vue，并把動態(tài)獲取的表格數據傳給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: '節(jié)點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: '節(jié)點',
						grade: 'ERWFD'
					},
					{
						id: '3241',
						name: '節(jié)點B',
						grade: 'FDD'
					},
					{
						id: '8238',
						name: '節(jié)點C',
						grade: 'FVDFA'
					},
					{
						id: '3424',
						name: '節(jié)點',
						grade: 'ERWFD'
					},
					{
						id: '32ree',
						name: '節(jié)點B',
						grade: 'FDD'
					},
					{
						id: '821221',
						name: '節(jié)點C',
						grade: 'FVDFA'
					},
					{
						id: '89238',
						name: '節(jié)點',
						grade: 'ERWFD'
					},
					{
						id: '323432',
						name: '節(jié)點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>

然后就可以實現表格內容動態(tài)顯示啦~