當前頁面:home.vue <template> <div> <div class="chart-wrap"> <nodata v-if="tableNoData" class="newnodata"></nodata> <jtable :tableData="tableData" :showColumns="showColumns" :storeDate="store_date" :isDetail='isDetail'></jtable> </div> <noNetwork v-if="noNetwork"></noNetwork> </div> </template> import nodata from 'src/components/modelNoData.vue'; import noNetwork from 'src/components/noNetwork.vue'; import table from 'src/components/table/table.vue'; export default { components: { table, nodata, noNetwork }, data() { noNetwork: false, tableNoData: false,
tableData:[]
} }
組件:table.vue
<template> <div class="table" id="table"> <table border="1" borderColor="#e5e5e5" class="scrollTable"> <!-- 表頭 --> <thead :class="{'time_xi': tableData.columns[0].field == 'time_xi'}"> </thead> <tbody> <template v-for="(item,indexs) in tableData"> <tr><td></td></tr> <div v-show='i==indexs' class='detailr' :style='{height:h+"rem"}'></div> </template> </tbody> </table> </div> </template> export default { props: ['tableData'], data() { return { i: 'i', } }, watch: { //引用類型變量、採用深度監聽 tableData: { // 表格數據刷新後需清空以前查看的訂單詳情內容 handler: function (newVal, oldVal) { this.i = 'i'; }, deep: true }, }}