域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過(guò)

table.vue文件

<el-table< p="">

<pre class="wp-block-code" style="box-sizing: border-box; font-size: 13px; overflow: auto; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; word-spacing: 0px; text-transform: none; word-break: break-all; font-weight: 300; color: #333333; font-style: normal; orphans: 2; widows: 2; margin: 0px 0px 10px; display: block; letter-spacing: normal; line-height: 1.4285; background-color: #f5f5f5; text-indent: 0px; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow-wrap: break-word; border-radius: 0px; border: #cccccc 1px solid; padding: 9px;"><code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; white-space: pre-wrap; margin: 0px 5px; background-color: transparent; border-radius: 0px; border: #e1e1e1 1px solid; padding: 0px;"><template> <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" :cell-style="{textAlign:'center'}" @selection-change="change" :show-header="showHeader" :border="border" :max-height="maxHeight" :v-loading="loading" :class="className" element-loading-text="給我一點(diǎn)時(shí)間" stripe fit highlight-current-row > <template v-for="tableColumn in tableList"> <el-table-column :type="tableColumn.type" :width="tableColumn.width" v-if="tableColumn.type === 'selection'" ></el-table-column> <!-- slot 添加自定義配置項(xiàng)--> <slot v-if="tableColumn.slot" :name="tableColumn.slot" ></slot> <!-- component 特殊處理某一項(xiàng)--> <component v-else-if="tableColumn.component" :is="config.component" :col-config="tableColumn" ></component> <el-table-column :label="tableColumn.label" :type="tableColumn.type" :prop="tableColumn.prop" :width="tableColumn.width" :fixed="tableColumn.fixed " :sortable="tableColumn.sortable" v-if="(tableColumn.type !== 'selection')&&(tableColumn.type !== 'slot')" > </el-table-column> </template> </el-table> </template> <script> export default { data(){ return{} }, props: { tableList: { type: Array, default: function() { return []; } }, tableData: { type: Array, default: function() { return []; } }, showHeader: { type: Boolean, default: true }, border: { type: Boolean, default: false }, maxHeight: { type: [String, Number], default: null }, loading: { type: Boolean, default: false }, className: { type: String, default: "" }, tableRowClassName: { type: String, default: "" } } } </script> <style scoped> </style></code></pre>

 

 

 

 

很多人不明白為什么這里要加一個(gè)slot，這個(gè)封裝實(shí)際上就是把前面的tableList 作為一個(gè) prop 傳入，通過(guò)這個(gè)屬性，我們就可以在table中編輯任何簡(jiǎn)單或者復(fù)制的列， 完美～

使用方法如下：

 

 

 

<pre class="wp-block-code"><code><template> <my-table :tableData="tableData" :tableList="colConfigs"> </my-table> </template> <script> const PrefixPlusText = { props: ['colConfig'], template: ` <el-table-column :label="colConfig.label"> <span :slot-scope="{ row }"> {{ parseInt(row[colConfig.prop]) > 0 ? '+' + row[colConfig.prop] : row[colConfig.prop] }} </span> </el-table-column> ` } export default { data () { this.colConfigs = [ { prop: 'change', label: '變化' component: PrefixPlusText }, { prop: 'name', label: '趨勢(shì)', component: PrefixPlusText }, ] return { tableData: [{ change: '12%', trend: '10% }, { change: '-12%', trend: '-10%' }] } } } </script></code></pre>

 

 

 

總結(jié)

table 作為數(shù)據(jù)展示組件，在日常開發(fā)中經(jīng)常被用到，通過(guò)這篇文章，可以看到結(jié)合 vue 的 slot/component 特性，做一層封裝，可以大大簡(jiǎn)化 table 的使用，大部分時(shí)候只需寫一個(gè)配置屬性就可以了。

文章來(lái)源：田珊珊個(gè)人博客

來(lái)源地址：http://www.tianshan277.com/708.html

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！