国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

element-ui復(fù)雜table表格-動(dòng)態(tài)新增列、動(dòng)態(tài)調(diào)整行、列順序

這篇具有很好參考價(jià)值的文章主要介紹了element-ui復(fù)雜table表格-動(dòng)態(tài)新增列、動(dòng)態(tài)調(diào)整行、列順序。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請(qǐng)大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

目標(biāo):實(shí)現(xiàn)一個(gè)復(fù)雜table具有以下功能:表格行展開、全部展開、收起、全部收起;可動(dòng)態(tài)配置展示哪些列、調(diào)整列展示順序;動(dòng)態(tài)調(diào)整行順序、行上移、行下移、行移動(dòng)最頂部、行移動(dòng)最底部

一、頁(yè)面效果:

1.全部展開

element-ui復(fù)雜table表格-動(dòng)態(tài)新增列、動(dòng)態(tài)調(diào)整行、列順序

2.全部收起

element-ui復(fù)雜table表格-動(dòng)態(tài)新增列、動(dòng)態(tài)調(diào)整行、列順序

?3.配置顯示列

element-ui復(fù)雜table表格-動(dòng)態(tài)新增列、動(dòng)態(tài)調(diào)整行、列順序

?4.調(diào)整字段順序(拖拽方式)

element-ui復(fù)雜table表格-動(dòng)態(tài)新增列、動(dòng)態(tài)調(diào)整行、列順序

?5.行操作(查看、修改、刪除、行上下移動(dòng))

element-ui復(fù)雜table表格-動(dòng)態(tài)新增列、動(dòng)態(tài)調(diào)整行、列順序

二、代碼實(shí)現(xiàn)(vue+Element-ui)

思路:本質(zhì)上就是將表格看成一個(gè)數(shù)組,對(duì)表格的操作當(dāng)成對(duì)數(shù)組的操作。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-507583.html

<template>
  <div>
    <div style="width=300px;float: left; margin-bottom: 10px;">
        <el-button type="primary"  @click="openAll">全部展開</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ì)劃開始日期','計(jì)劃完成日期','實(shí)際開始日期','實(shí)際完成日期','參考提前期',
'計(jì)劃提前期','實(shí)際提前期','前置任務(wù)','產(chǎn)出物', '負(fù)責(zé)人', '負(fù)責(zé)人部門', '經(jīng)辦人', '經(jīng)辦人部門',
'重要程度','狀態(tài)', '逾期狀態(tài) ','承諾交期','預(yù)測(cè)交期','備注'];
export default {
  name: 'Test',
    components: {
    vuedraggable
  },
  data () {
    return {
        expandRowKeys: [],
        activeName:'fieldsChosen',
        dialogVisible:false,
              // 列信息
        checkedColumns:['編號(hào)','計(jì)劃開始日期','計(jì)劃完成日期','實(shí)際開始日期','實(shí)際完成日期'],
        checkAll:false,
        columns:columnOptions,
        isIndeterminate:true,
        fieldsTemp:[],//存放按指定順序排列的fields數(shù)組
        fields:[
            {label:"計(jì)劃名稱", prop:"planName", visible: true},
            {label:"編號(hào)", prop:"id", visible: true },
            {label:"計(jì)劃開始日期", prop:"beginTimeP", visible: true },
            {label:"計(jì)劃完成日期", prop:"endTimeP", visible: true },
            {label:"實(shí)際開始日期", 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é)人部門", prop:"principalDep", visible: false },
            {label:"經(jīng)辦人", prop:"operator", visible: false },
            {label:"經(jīng)辦人部門", 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ì)劃開始日期','計(jì)劃完成日期','實(shí)際開始日期','實(shí)際完成日期','參考提前期',
        // '計(jì)劃提前期','實(shí)際提前期','前置任務(wù)','產(chǎn)出物', '負(fù)責(zé)人', '負(fù)責(zé)人部門', '經(jīng)辦人', '經(jīng)辦人部門',
        // '重要程度','狀態(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)
    },
    // 全部打開
    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ì)劃開始日期','計(jì)劃完成日期','實(shí)際開始日期','實(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>

到了這里,關(guān)于element-ui復(fù)雜table表格-動(dòng)態(tài)新增列、動(dòng)態(tài)調(diào)整行、列順序的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來(lái)自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請(qǐng)注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • element-ui table 設(shè)置表格滾動(dòng)條位置

    場(chǎng)景: 在切換不同頁(yè)面時(shí)(被 keep-alive 緩存的組件間切換),頁(yè)面中的element-ui table的滾動(dòng)條位置沒有停留在原來(lái)的位置。目前需要切換不同的頁(yè)面返回來(lái)后,滾動(dòng)條保持在原來(lái)的位置。 代碼:

    2024年02月11日
    瀏覽(30)
  • 用element-ui渲染一個(gè)二級(jí)數(shù)據(jù)表格即復(fù)雜表格,并且自定標(biāo)題

    用element-ui渲染一個(gè)二級(jí)數(shù)據(jù)表格即復(fù)雜表格,并且自定標(biāo)題

    最終完成的效果: ?廢話不多說(shuō):直接上代碼,不懂來(lái)問(wèn) ? 說(shuō)明:關(guān)鍵的邏輯代碼不方便展示,只放了表格樣式代碼,若直接cv,報(bào)錯(cuò)純屬正常?。?! 另外:原創(chuàng)不易,轉(zhuǎn)載請(qǐng)注明出處!?。?/p>

    2024年02月03日
    瀏覽(22)
  • element-table的動(dòng)態(tài)操作,自動(dòng)以表格,動(dòng)態(tài)新增行、列,刪除行列

    element-table的動(dòng)態(tài)操作,自動(dòng)以表格,動(dòng)態(tài)新增行、列,刪除行列

    靈活的自定義表格行列以及增刪改查的操作,右鍵選中列則是列的刪除,效果如下 ? 為了方便可以直接復(fù)制代碼查看效果已把動(dòng)態(tài)數(shù)據(jù)換成自定義數(shù)據(jù)

    2024年02月11日
    瀏覽(26)
  • element-ui table表格雙擊行內(nèi)編輯

    行內(nèi)雙擊編輯的本質(zhì):點(diǎn)擊后input框出現(xiàn),保存后span標(biāo)簽出現(xiàn) 如果有編輯某一行的某列其他列隨之變化的需求,則需要將上一步選中行存下來(lái),不然雙擊后選中行就變了,隨之修改的值也會(huì)產(chǎn)生錯(cuò)誤 此外,因?yàn)橛玫搅?tableRowClassName({row, rowIndex}){ row.index = rowIndex;}, ,所以導(dǎo)致

    2024年02月15日
    瀏覽(29)
  • 【element-ui】table表格底部合計(jì)自定義配置

    【element-ui】table表格底部合計(jì)自定義配置

    目錄 ?帶合計(jì)的表格設(shè)置 ?自定義方法??getSummaries ? 【element-ui】table表格底部合計(jì)自定義配置,最近做管理系統(tǒng)用到餓了么UI,用到了table表格合計(jì)需求,常用的table底部,有時(shí)候不是所有內(nèi)容都需要合計(jì),比如上圖這個(gè)編號(hào)是數(shù)字,但是不需要合計(jì)計(jì)算處理的,這時(shí)候就需

    2024年02月11日
    瀏覽(24)
  • element-ui中table表格標(biāo)簽編輯功能的實(shí)現(xiàn)

    element-ui中table表格標(biāo)簽編輯功能的實(shí)現(xiàn)

    表格實(shí)現(xiàn)編輯功能。在實(shí)際開發(fā)過(guò)程中,我們表格的表頭往往很多,有的還會(huì)發(fā)生變化,所以本文參考一位博主的代碼結(jié)合自己的項(xiàng)目進(jìn)行了改編。 參考原文鏈接:vue element-ui實(shí)現(xiàn)table表格可編輯修改

    2024年02月13日
    瀏覽(23)
  • vue監(jiān)聽element-ui的table表格滾動(dòng)事件

    這篇文章主要是講述“如何監(jiān)聽element-ui table滾動(dòng)事件”,按我自己嘗試的方法去實(shí)現(xiàn)。 需求分析: 前兩天做項(xiàng)目遇到一個(gè)問(wèn)題,數(shù)據(jù)量大,然后表格渲染的很慢,而且很卡怎么辦?有什么優(yōu)化的方式? 那無(wú)非就是兩種方法。 先加載一屏表格的數(shù)據(jù),之后觸底加載新的數(shù)據(jù)

    2024年02月12日
    瀏覽(27)
  • element-ui table 表格控件實(shí)現(xiàn)單選功能

    element-ui table 表格控件實(shí)現(xiàn)單選功能

    今天遇到一個(gè)需求,感覺挺簡(jiǎn)單的,需求如下: 就是一個(gè)表格,在表格的前面加上一個(gè)選擇框,注意: 只能單選 然后我就去element ui上粘代碼: 雖然element ui上有對(duì)應(yīng)的單選表格,可是并不符合我的需求 然后我又發(fā)現(xiàn)下面有一個(gè)多選的表格,樣式雖然相似,可是還是不符合我

    2024年02月11日
    瀏覽(18)
  • vue使用element-ui table 清除表格背景色以及表格邊框線
  • vue中element-ui表格組件el-table封裝,在table表格中插入圖片

    vue中element-ui表格組件el-table封裝,在table表格中插入圖片

    ????????這次寫的項(xiàng)目是寫后臺(tái)管理系統(tǒng)這部分,對(duì)于后臺(tái)管理使用vue寫,用組件的話,table組件用得次數(shù)比較多,可以封裝一個(gè)table組件。 ????????1.如封裝的table組件: ?:prop=\\\"item.prop\\\"??:label=\\\"item.label\\\"是必須要有的,其他的可以根據(jù)自己需要寫 。 2.封裝之后是就是使

    2024年02月15日
    瀏覽(31)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包