表格中我們經(jīng)常需要動態(tài)加載數(shù)據(jù)， 如果有多個頁面都需要用到表格， 那我希望可以有個組件， 只傳數(shù)據(jù)過去顯示， 不用每個頁面都去寫這么一段內(nèi)容：

<el-table :data="tableData" border size="mini" fit highlight-current-row height="500">  <el-table-column type="index" align="center" fixed></el-table-column>  <el-table-column prop="DHM" min-width="140px" label="時間" align="center"></el-table-column>  <el-table-column prop="PLAZANO" min-width="100px" label="編碼" align="center"></el-table-column>  <el-table-column prop="PLAZANAME" min-width="100px" label="名稱" align="center"></el-table-column>  <el-table-column prop="CAR_PLATE" label="號碼" align="center"></el-table-column>  <el-table-column prop="CARD_NO" min-width="120px" label="卡號" align="center"></el-table-column>  <el-table-column prop="DATATYPE" label="數(shù)據(jù)類型" align="center" :formatter="formatDATATYPE"></el-table-column>  <el-table-column prop="STAFFNAME" min-width="100px" label="姓名" align="center"></el-table-column>  <el-table-column prop="MEDIATYPE" label="付款方式" align="center"></el-table-column>  <el-table-column prop="COMP_CASH" label="計算費(fèi)額" align="center"></el-table-column>  <el-table-column prop="FACT_CASH" label="實(shí)收費(fèi)額" align="center"></el-table-column>  <el-table-column label="操作" min-width="140px" align="center">    <template slot-scope="scope">     <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>     <el-button type="text" size="small">編輯</el-button>    </template>  </el-table-column></el-table>

　上面這段代碼是一個element-ui中tabele表格的形式，這里表頭都是已經(jīng)固定的， 如果每個頁面都寫上這么一段， 不同的是表頭名字和字段，這樣子就有點(diǎn)重復(fù)，而且頁面的篇幅也就比較大了，于是把這塊寫成一個組件， 每個頁面引入這個組件， 再傳入數(shù)據(jù)。

　　1.  表格組件：

•首先  table.vue 組件可以這樣寫：

<el-table :data="tableData" border size="mini" fit highlight-current-row height="500" :row-style="rowStyle" @row-dblclick="rowDblclick"   v-loading="loading"   element-loading-text="拼命加載中"   element-loading-spinner="el-icon-loading"   element-loading-background="rgba(0, 0, 0, 0.3)">   <el-table-column type="index" align="center" fixed></el-table-column>   <!-- prop: 字段名name, label: 展示的名稱, fixed: 是否需要固定(left, right), minWidth: 設(shè)置列的最小寬度(不傳默認(rèn)值), oper: 是否有操作列      oper.name: 操作列字段名稱, oper.clickFun: 操作列點(diǎn)擊事件, formatData: 格式化內(nèi)容 -->   <el-table-column v-for="(th, key) in tableHeader"    :key="key"    :prop="th.prop"    :label="th.label"    :fixed="th.fixed"    :min-width="th.minWidth" align="center">     <!-- 加入template主要是有操作一欄， 操作一欄的內(nèi)容是相同的， 數(shù)據(jù)不是動態(tài)獲取的，不過我這里操作一欄的名字定死了（oper表示是操作這一列，否則就不是） -->     <template slot-scope="scope">      <div v-if="th.oper">       <el-button v-for="(o, key) in th.oper" :key="key" @click="o.clickFun(scope.row)" type="text" size="small">{{o.name}}</el-button>      </div>      <div v-else>       <span v-if="!th.formatData">{{ scope.row[th.prop] }}</span>       <span v-else>{{ scope.row[th.prop] | formatters(th.formatData) }}</span>      </div>     </template>   </el-table-column></el-table>