element-ui復(fù)雜table表格動(dòng)態(tài)新增列、動(dòng)態(tài)調(diào)整行以及列順序詳解
更新時(shí)間：2023年08月18日 08:35:15 作者：三月的一天
這篇文章主要給大家介紹了關(guān)于element-ui復(fù)雜table表格動(dòng)態(tài)新增列、動(dòng)態(tài)調(diào)整行以及列順序的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
目標(biāo)：
實(shí)現(xiàn)一個(gè)復(fù)雜table具有以下功能：表格行展開(kāi)、全部展開(kāi)、收起、全部收起；可動(dòng)態(tài)配置展示哪些列、調(diào)整列展示順序；動(dòng)態(tài)調(diào)整行順序、行上移、行下移、行移動(dòng)最頂部、行移動(dòng)最底部
一、頁(yè)面效果：
1.全部展開(kāi)
2.全部收起
3.配置顯示列
4.調(diào)整字段順序（拖拽方式）
5.行操作（查看、修改、刪除、行上下移動(dòng)）
二、代碼實(shí)現(xiàn)（vue+Element-ui）
思路：本質(zhì)上就是將表格看成一個(gè)數(shù)組，對(duì)表格的操作當(dāng)成對(duì)數(shù)組的操作。
<template>
<div>
<div style="width=300px;float: left; margin-bottom: 10px;">
<el-button type="primary" @click="openAll">全部展開(kāi)</el-button>
<el-button type="primary" @click="closeAll">全部收起</el-button>
<el-button type="primary" @click="dialogVisible = true">字段配置</el-button>
</div>
<div>
<el-table :data="tableData" style="width:100%" :row-key="getRowKey" border
:tree-props="{children: 'children'}" type="expand" ref="table"
:expand-row-keys="expandRowKeys"
stripe sortable="true">
<el-table-column :prop="col.prop" :label="col.label" v-for="(col,index) in activeFields" :key="index" icon="el-icon-search" ></el-table-column>
<el-table-column label="操作" fixed="right">
<template slot-scope="scope">
<el-dropdown @command="handleCommand">
<span>...</span>
<el-dropdown-menu>
<el-dropdown-item icon="el-icon-search" :command="beforeHandleCommand(scope.$index, scope.row,'search')" >查看</el-dropdown-item>
<el-dropdown-item icon="el-icon-edit-outline" :command="beforeHandleCommand(scope.$index, scope.row,'edit')">修改</el-dropdown-item>
<el-dropdown-item icon="el-icon-delete" :command="beforeHandleCommand(scope.$index, scope.row,'delete')">刪除</el-dropdown-item>
<el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'moveTop')">移至頂部</el-dropdown-item>
<el-dropdown-item icon="el-icon-arrow-up" :command="beforeHandleCommand(scope.$index, scope.row,'moveUp')">上移</el-dropdown-item>
<el-dropdown-item icon="el-icon-arrow-down" :command="beforeHandleCommand(scope.$index, scope.row,'moveDown')">下移</el-dropdown-item>
<el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'moveBottom')">移至底部</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog :visible.sync="dialogVisible" width="30%" center >
<span slot="title" class="title">字段配置</span>
<el-tabs v-model="activeName">
<el-tab-pane label="字段選擇" name="fieldsChosen">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全部</el-checkbox>
<div style="margin:15px 0;"></div>
<el-checkbox-group v-model="checkedColumns" @change="handleCheckedList">
<div>
<el-checkbox style="width:40%;" v-for="item in columns" :label="item" :key="item">{{item}}</el-checkbox>
</div>
</el-checkbox-group>
</el-tab-pane>
<el-tab-pane label="字段順序" name="fieldSorted">
<vuedraggable v-model="fieldList">
<transition-group>
<div v-for="field in fieldList" :key="field" style="background-color:gainsboro;margin:10px; text-align: center;">
{{field}}
</div>
</transition-group>
</vuedraggable>
</el-tab-pane>
</el-tabs>
<span slot="footer" class="dialog-footer">
<el-button class="buttonLeft" type="primary" plain @click="recoverChecked">恢復(fù)默認(rèn)</el-button>
<el-button @click="dialogVisible = false" class="buttonRight">取 消</el-button>
<el-button type="primary" @click="submit" class="buttonRight" >確 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import vuedraggable from 'vuedraggable';
const columnOptions=['編號(hào)', '計(jì)劃開(kāi)始日期','計(jì)劃完成日期','實(shí)際開(kāi)始日期','實(shí)際完成日期','參考提前期',
'計(jì)劃提前期','實(shí)際提前期','前置任務(wù)','產(chǎn)出物', '負(fù)責(zé)人', '負(fù)責(zé)人部門(mén)', '經(jīng)辦人', '經(jīng)辦人部門(mén)',
'重要程度','狀態(tài)', '逾期狀態(tài) ','承諾交期','預(yù)測(cè)交期','備注'];
export default {
name: 'Test',
components: {
vuedraggable
},
data () {
return {
expandRowKeys: [],
activeName:'fieldsChosen',
dialogVisible:false,
// 列信息
checkedColumns:['編號(hào)','計(jì)劃開(kāi)始日期','計(jì)劃完成日期','實(shí)際開(kāi)始日期','實(shí)際完成日期'],
checkAll:false,
columns:columnOptions,
isIndeterminate:true,
fieldsTemp:[],//存放按指定順序排列的fields數(shù)組
fields:[
{label:"計(jì)劃名稱(chēng)", prop:"planName", visible: true},
{label:"編號(hào)", prop:"id", visible: true },
{label:"計(jì)劃開(kāi)始日期", prop:"beginTimeP", visible: true },
{label:"計(jì)劃完成日期", prop:"endTimeP", visible: true },
{label:"實(shí)際開(kāi)始日期", prop:"beginTimeS", visible: true },
{label:"實(shí)際完成日期", prop:"endTimeS" , visible: true },
{label:"參考提前期", prop:"referTime", visible: false },
{label:"計(jì)劃提前期", prop:"planTime", visible: false },
{label:"實(shí)際提前期", prop:"practicalTime", visible: false },
{label:"前置任務(wù)", prop:"frontTask", visible: false },
{label:"產(chǎn)出物", prop:"product", visible: false },
{label:"負(fù)責(zé)人", prop:"principal", visible: false },
{label:"負(fù)責(zé)人部門(mén)", prop:"principalDep", visible: false },
{label:"經(jīng)辦人", prop:"operator", visible: false },
{label:"經(jīng)辦人部門(mén)", prop:"operatorDep", visible: false },
{label:"重要程度", prop:"important", visible: false },
{label:"狀態(tài)", prop:"status", visible: false },
{label:"逾期狀態(tài)", prop:"delayStatus" , visible: false },
{label:"承諾交期", prop:"promiseTime" , visible: false },
{label:"預(yù)測(cè)交期", prop:"predictTime" , visible: false },
{label:"備注", prop:"remark", visible: false }
],
// fieldList:['編號(hào)', '計(jì)劃開(kāi)始日期','計(jì)劃完成日期','實(shí)際開(kāi)始日期','實(shí)際完成日期','參考提前期',
// '計(jì)劃提前期','實(shí)際提前期','前置任務(wù)','產(chǎn)出物', '負(fù)責(zé)人', '負(fù)責(zé)人部門(mén)', '經(jīng)辦人', '經(jīng)辦人部門(mén)',
// '重要程度','狀態(tài)', '逾期狀態(tài) ','承諾交期','預(yù)測(cè)交期','備注'],
fieldList:columnOptions,
tableData: [
{
id: "001",
planName: "ffff",
beginTimeP: "2022-02-03",
endTimeP: "2022-02-03",
beginTimeS: "2022-02-03",
endTimeS: "2022-02-03",
children: [
{ id: "00101", planName: "ffff",beginTimeP: "2022-02-03",endTimeP: "2022-02-03",beginTimeS: "2022-02-03",endTimeS: "2022-02-03"},
{ id: "00102", planName: "ffff",beginTimeP: "2022-02-03",endTimeP: "2022-02-03",beginTimeS: "2022-02-03",endTimeS: "2022-02-03"},
{ id: "00103", planName: "ffff",beginTimeP: "2022-02-03",endTimeP: "2022-02-03",beginTimeS: "2022-02-03",endTimeS: "2022-02-03"},
{ id: "00104", planName: "ffff",beginTimeP: "2022-02-03",endTimeP: "2022-02-03",beginTimeS: "2022-02-03",endTimeS: "2022-02-03"}
]
},
{
id: "002",
planName: "uuuu",
beginTimeP: "2022-02-03",
endTimeP: "2022-02-03",
beginTimeS: "2022-02-03",
endTimeS: "2022-02-03",
children: [
{ id: "00201", planName: "ffff",beginTimeP: "2022-02-03",endTimeP: "2022-02-03",beginTimeS: "2022-02-03",endTimeS: "2022-02-03"},
{ id: "00202", planName: "ffff",beginTimeP: "2022-02-03",endTimeP: "2022-02-03",beginTimeS: "2022-02-03",endTimeS: "2022-02-03"},
]
},
{
id: "003",
planName: "yyyy",
beginTimeP: "2022-02-03",
endTimeP: "2022-02-03",
beginTimeS: "2022-02-03",
endTimeS: "2022-02-03",
children: [
{ id: "00301", planName: "ffff",beginTimeP: "2022-02-03",endTimeP: "2022-02-03",beginTimeS: "2022-02-03",endTimeS: "2022-02-03"},
{ id: "00302", planName: "ffff",beginTimeP: "2022-02-03",endTimeP: "2022-02-03",beginTimeS: "2022-02-03",endTimeS: "2022-02-03"}
]
},
{
id: "004",
planName: "xxxx",
beginTimeP: "2022-02-03",
endTimeP: "2022-02-03",
beginTimeS: "2022-02-03",
endTimeS: "2022-02-03",
children: [
{ id: "00401", planName: "ffff",beginTimeP: "2022-02-03",endTimeP: "2022-02-03",beginTimeS: "2022-02-03",endTimeS: "2022-02-03"},
{ id: "00402", planName: "ffff",beginTimeP: "2022-02-03",endTimeP: "2022-02-03",beginTimeS: "2022-02-03",endTimeS: "2022-02-03"}
]
}
]
}
},
computed:{
activeFields: function(){
return this.fields.filter((item)=>{
return item.visible;
})
}
},
mounted(){
this.tableDataHandle(this.tableData, 'children')
},
methods:{
// 數(shù)據(jù)處理
tableDataHandle(arr, key, level = 0, indexLine = []) {
level = level + 1
arr.map((item, idx) => {
item.level = level
item.indexLine = Object.assign([], indexLine)
item.indexLine.push(idx)
item.parentLength = arr.length
if (item[key]) {
this.tableDataHandle(item[key], key, level, item.indexLine)
}
})
return arr
},
forTableData(arr,isExpand){
arr.forEach(i =>{
this.$refs.table.toggleRowExpansion(i,isExpand);
if(i.children){
this.forTableData(i.children,isExpand)
}})
},
// 全部關(guān)閉
closeAll() {
this.forTableData(this.tableData,false)
},
// 全部打開(kāi)
openAll() {
this.forTableData(this.tableData,true)
},
getRowKey(v){
return v.id
},
beforeHandleCommand(index,row,command) {
return {
'index':index,
'row':row,
'command':command
}
},
handleCommand(command) {
switch(command.command) {
case "search":
this.search(command.index);
break;
case "edit":
this.edit(command.index);
break;
case "delete":
this.rowOperation(command.row.indexLine,"delete",command.row);
break;
case "moveTop":
this.rowOperation(command.row.indexLine,"moveTop",command.row);
break;
case "moveUp":
this.rowOperation(command.row.indexLine,"moveUp",command.row);
break;
case "moveDown":
this.rowOperation(command.row.indexLine,"moveDown",command.row);
break;
case "moveBottom":
this.rowOperation(command.row.indexLine,"moveBottom",command.row);
break;
}
},
handleCheckAllChange(val){
this.checkedColumns = val ? columnOptions : [];
this.isIndeterminate = false;
},
handleCheckedList(val){
this.checkedColumns=val;
let checkedCount = val.length;
this.checkAll = checkedCount === this.columns.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.columns.length;
},
recoverChecked(){
this.checkedColumns=['編號(hào)','計(jì)劃開(kāi)始日期','計(jì)劃完成日期','實(shí)際開(kāi)始日期','實(shí)際完成日期'];
this.fieldList=columnOptions;
},
submit(){
this.dialogVisible=false;
//更新表格展示列
this.fields.forEach((item)=>{
item.visible=false;
})
this.checkedColumns.forEach((item)=>{
for(let i=0;i<this.fields.length;i++){
if(this.fields[i].label==item){
this.fields[i].visible=true;
}
}
})
//更新表格列順序
//更改后列順序this.fieldList
this.fieldsTemp=[];//清空存放按指定順序排列的fields數(shù)組
let n=0;
this.fieldList.forEach((item)=>{
for(let i=0;i<this.fields.length;i++){
if(this.fields[i].label==item){
this.fieldsTemp[n++]=this.fields[i];
}
}
})
this.fields=this.fieldsTemp;
},
edit(index,row){
},
rowOperation(target,flag,row) {
let temTable
if (target.length == 1) {
temTable = this.tableData
} else {
temTable = this.getParent(target).children
}
let index = target[target.length - 1]
if(flag === "moveTop"){ // 置頂
// 將元素unshift到數(shù)組第一位
temTable.splice(index, 1);
temTable.unshift(row)
this.tableDataHandle(this.tableData, 'children')
return
}
if(flag === "moveBottom"){
temTable.splice(index, 1);
temTable.push(row)
this.tableDataHandle(this.tableData, 'children')
return;
}
if (flag === "moveUp") { //上移
let upData = temTable[index - 1]
temTable.splice(index - 1, 1);
temTable.splice(index, 0, upData);
}
if(flag ==="moveDown")
{ //下移
let downData = temTable[index + 1]
temTable.splice(index + 1, 1);
temTable.splice(index, 0, downData);
}
if(flag =="delete")
{ //刪除
temTable.splice(index,1);
}
this.tableDataHandle(this.tableData, 'children')
},
getParent(target) {
if(target.length==1){
return this.tableData;
}else if(target.length==2) {
return this.tableData[target[0]];
} else if(target.length>2) {
return this.getParent(target.length-1).children[target[target.length-2]];
}
}
}
}
</script>
<style scoped>
.title{
float: left;
}
.buttonLeft{
width:20%;
margin-right: 40%;
}
.buttonRight{
width:15%;
}
</style>總結(jié)
到此這篇關(guān)于element-ui復(fù)雜table表格動(dòng)態(tài)新增列、動(dòng)態(tài)調(diào)整行以及列順序的文章就介紹到這了,更多相關(guān)element-ui table表格動(dòng)態(tài)新增列內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- element el-table如何實(shí)現(xiàn)表格動(dòng)態(tài)增加/刪除/編輯表格行(帶校驗(yàn)規(guī)則)
- Vue+ElementUI踩坑之動(dòng)態(tài)顯示/隱藏表格的列el-table-column問(wèn)題
- vue element-ui表格自定義動(dòng)態(tài)列具體實(shí)現(xiàn)
- el-element中el-table表格嵌套el-select實(shí)現(xiàn)動(dòng)態(tài)選擇對(duì)應(yīng)值功能
- vue?element-ui動(dòng)態(tài)橫向統(tǒng)計(jì)表格的實(shí)現(xiàn)
- element表格行列的動(dòng)態(tài)合并示例詳解
- element 動(dòng)態(tài)合并表格的步驟
- Vue+elementui 實(shí)現(xiàn)復(fù)雜表頭和動(dòng)態(tài)增加列的二維表格功能
- element根據(jù)輸入動(dòng)態(tài)生成表格的示例代碼
相關(guān)文章
解決Vue使用swiper動(dòng)態(tài)加載數(shù)據(jù),動(dòng)態(tài)輪播數(shù)據(jù)顯示白屏的問(wèn)題
今天小編就為大家分享一篇解決Vue使用swiper動(dòng)態(tài)加載數(shù)據(jù),動(dòng)態(tài)輪播數(shù)據(jù)顯示白屏的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)無(wú)限加載瀑布流，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了vue?中簡(jiǎn)單使用mock的方法，本文通過(guò)圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-02-02
這篇文章主要介紹了vue+express生成token方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue中可編輯樹(shù)狀表格的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue中可編輯樹(shù)狀表格的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
這篇文章主要介紹了vue3項(xiàng)目中封裝axios的示例代碼,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
本文主要介紹了基于Vue3的全屏拖拽上傳組件，其實(shí)思路上與其他拖拽上傳組件基本一樣,都是指定一個(gè)區(qū)域可拖拽,然后讀取文件在上傳，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-09-09
這篇文章主要為大家整理了Vue3的8種和Vue2的12種組件通信的使用方法，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定的幫助，值得收藏2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue購(gòu)物車(chē)插件的編寫(xiě)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要為大家詳細(xì)介紹了Vue3響應(yīng)式核心之reactive的相關(guān)知識(shí)，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue3有一定的幫助，需要的可以參考一下2023-04-04