(精華)2020年7月18日 vue element-ui實現動態表格
固定表頭, 按照表頭順序排序
<template>
<div class="app-container">
<div class="filter-container">
<el-checkbox-group v-model="checkboxVal">
<el-checkbox label="apple">
apple
</el-checkbox>
<el-checkbox label="banana">
banana
</el-checkbox>
<el-checkbox label="orange">
orange
</el-checkbox>
</el-checkbox-group>
</div>
<el-table :key="key" :data="tableData" border fit highlight-current-row style="width: 100%">
<el-table-column prop="name" label="fruitName" width="180" />
<el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
<template slot-scope="scope">
{{ scope.row[fruit] }}
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
const defaultFormThead = ['apple', 'banana']
export default {
data() {
return {
tableData: [
{
name: 'fruit-1',
apple: 'apple-10',
banana: 'banana-10',
orange: 'orange-10'
},
{
name: 'fruit-2',
apple: 'apple-20',
banana: 'banana-20',
orange: 'orange-20'
}
],
key: 1, // table key
formTheadOptions: ['apple', 'banana', 'orange'],
checkboxVal: defaultFormThead,
formThead: defaultFormThead
}
},
watch: {
checkboxVal(valArr) {
this.formThead = this.formTheadOptions.filter(i => valArr.indexOf(i) >= 0)
this.key = this.key + 1
}
}
}
</script>
不固定表頭, 按照點選順序排序
<template>
<div class="app-container">
<div class="filter-container">
<el-checkbox-group v-model="formThead">
<el-checkbox label="apple">
apple
</el-checkbox>
<el-checkbox label="banana">
banana
</el-checkbox>
<el-checkbox label="orange">
orange
</el-checkbox>
</el-checkbox-group>
</div>
<el-table :data="tableData" border fit highlight-current-row style="width: 100%">
<el-table-column prop="name" label="fruitName" width="180" />
<el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
<template slot-scope="scope">
{{ scope.row[fruit] }}
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: 'fruit-1',
apple: 'apple-10',
banana: 'banana-10',
orange: 'orange-10'
},
{
name: 'fruit-2',
apple: 'apple-20',
banana: 'banana-20',
orange: 'orange-20'
}
],
formThead: ['apple', 'banana']
}
}
}
</script>
相關文章
- (精華)2020年7月18日 vue element-ui實現表格拖動排序VueUI排序
- (精華)2020年7月18日 vue element-ui實現表格可編輯VueUI
- (精華)2020年7月14日 vue vue-router動態路由的實現許可權控制Vue路由
- (精華)2020年7月18日 vue clipboard複製剪下Vue
- (精華)2020年7月16日 vue vue-count-to數字滾動外掛Vue
- 基於element-ui實現的vue版的動態表單UIVue
- (精華)2020年8月18日 快取機制快取
- (精華)2020年7月17日 vue mixins的使用Vue
- (精華2020年5月17日更新) vue實戰篇 手寫vue底層原始碼Vue原始碼
- (精華)2020年7月12日 vue 手搭腳手架vue-cliVue
- (精華2020年5月8日更新) vue教程篇 vue-router路由的使用Vue路由
- Element-ui,Vue表格匯出生成Excel表UIVueExcel
- (精華2020年5月21日更新) vue實戰篇 實時通訊websocket的封裝結合vue的使用VueWeb封裝
- element-ui table表格元件實現手風琴效果UI元件
- vue2.0使用vue-seamless-scroll實現表格平滑滾動Vue
- (精華2020年5月20日更新) vue教程篇 父子元件相互傳參Vue元件
- vue 實現動態拓撲圖Vue
- (精華2020年5月8日更新) vue教程篇 vue-router路由的許可權控制Vue路由
- Vue實現匯出excel表格VueExcel
- 用Vue、element-ui、axios實現省市區三級聯動VueUIiOS
- vue3.0使用vue3-seamless-scroll實現表格平滑滾動Vue
- 【18】vue.js — 動態元件Vue.js元件
- (精華)2020年7月12日 vue 非父子元件相互傳參(釋出訂閱)Vue元件
- (精華2020年5月4日更新) vue教程篇 事件簡寫和事件物件$eventVue事件物件
- vue實現前端匯出excel表格Vue前端Excel
- (精華)2020年6月28日 Canvas 進度條Canvas
- Vue element-ui 裡面的table匯出excel表格 步驟VueUIExcel
- (精華2020年5月4日更新) vue教程篇 計算屬性computed的使用Vue
- (精華2020年5月4日更新) vue教程篇 v-show和v-if的使用Vue
- (精華)2020年7月2日 ASP.NET Core Castle實現服務注入和AOP(工具版)ASP.NETAST
- wps表格精華教程
- 動態建立表格
- vue+iview 實現可編輯表格VueView
- (精華)2020年6月28日 Canvas 基礎知識Canvas
- element-ui匯出表格UI
- javascript實現的動態新增和刪除表格行程式碼JavaScript行程
- (精華2020年5月4日更新) vue教程篇 簡單小結(1)-使用者管理Vue
- element-UI庫Table表格匯出Excel表格UIExcel