el-table 表格拖拽 + 表头可修改 + 宽度自定义

暴富暴富暴富啦啦啦

已于 2024-05-17 19:21:59 修改

阅读量263

点赞数 5

文章标签： vue.js elementui javascript

于 2024-05-17 17:18:34 首次发布

本文链接：https://blog.csdn.net/szzlh123456789/article/details/139006795

版权

el-table 表格拖拽 + 表头可修改+ 宽度自定义

宽度自定义

@header-dragend="headerdragend"

操作之后获取最后的宽度
headerdragend(newWidth, oldWidth, column, event) {
     // 获取当前拖动的是第几个，方便后续检测 DOM 是否已更新
     var currentColIndex = this.tableColumnList.findIndex(item=>item.label == event.target.innerText);
      this.tableColumnList[currentColIndex].wide = newWidth;
      this.col[currentColIndex].wide = newWidth;
}

<template>
    <div class="app-container">
        <div>
            <el-form :model="queryParams" ref="queryForm" size="small" v-show="showSearch" label-width="68px">
                <el-row :gutter="24">
                    <el-col :span="10">
                        <el-form-item label="任务名称" prop="jobName">
                            <el-input v-model="queryParams.jobName" placeholder="请输入任务名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
                            <el-button icon="el-icon-refresh" size="mini">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div>
            <el-row :gutter="8" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" plain icon="el-icon-plus" size="mini">新增</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="success" plain icon="el-icon-edit" size="mini">修改</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="danger" plain icon="el-icon-delete" size="mini">删除</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="warning" plain icon="el-icon-download" size="mini">导出</el-button>
                </el-col>
                <right-toolbar :columns="columns" :showSearch.sync="showSearch"></right-toolbar>
            </el-row>
        </div>
        <el-table :data="tableData" border row-key="id" style="width: 100%;" @cell-click="tsetClick"
            @header-click="headerTest" @header-dragend="headerdragend">
            <el-table-column 
                v-for="(item, index) in col" 
                align="center" 
                show-overflow-tooltip 
                :key="`col_${index}`"
                :property="item.field" 
                :width="item.wide"
                :prop="tableColumnList[index].field" 
                :label="item.label">
                <template slot-scope="scope">
                    <span @click="getIndex(scope.$index)">{{scope.row[scope.column.property]}}</span>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :visible.sync="dialogForHeader" title="修改表头名称" width="800">
            <el-form ref="form" :model="tableHeader" label-width="80px">
                <el-form-item label="表头名称">
                    <el-input v-model="tableHeader.tableHeaderName" placeholder="请输入表头名称" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import Sortable from 'sortablejs'
import { setUpByKey } from '../../../api/system/Adaptive'
export default {
    data() {
        return {
            queryParams: {},
            // 显示搜索条件
            showSearch: true,
            // 列信息
            columns: [
                { key: 0, label: '日期', visible: true },
                { key: 1, label: '姓名', visible: true },
                { key: 2, label: '地址', visible: true },
            ],
            // 多选框
            multipleSelection:[],
            tableCellIndex: "",
            columnName: "",
            tableCell: { tableCellData: "" },
            num: 7,
            tableHeader: { tableHeaderName: "", property: "" },
            dialogForHeader: false,
            col: [],
            // 这里为了简便我就没有调用后台接口获取数据，直接写的假数据  你要用的话可以调用后台接口获取tableColumnList，注意数据格式
            tableColumnList:[],
            tableData: [{
                serial: '1',
                name: '王小虎1',
                adress: '上海市普陀区金沙江路 1518 弄',
                data: '2016-05-02',
            }, {
                serial: '2',
                name: '王小虎2',
                adress: '上海市普陀区金沙江路 1518 弄',
                data: '2016-05-02',
            }, {
                serial: '3',
                name: '王小虎3',
                adress: '上海市普陀区金沙江路 1518 弄',
                data: '2016-05-02',
            }, {
                serial: '4',
                name: '王小虎4',
                adress: '上海市普陀区金沙江路 1518 弄',
                data: '2016-05-02',
            }, {
                serial: '5',
                name: '王小虎5',
                adress: '上海市普陀区金沙江路 1518 弄',
                data: '2016-05-06',
            }, {
                serial: '6',
                name: '王小虎6',
                adress: '上海市普陀区金沙江路 1518 弄',
                data: '2016-05-02',
            }],
        }
    },
    mounted() {
        this.columnDrop()
        this.getInfo()
    },
    methods: {
        openImportTable(){
            this.$refs.import.show();
        },
        getInfo(){
            setUpByKey('tfhRIWm7').then(res => {
                this.col = JSON.parse(res.data.setJson)
                this.tableColumnList = JSON.parse(res.data.setJson)
            })
        },
        handleSelectionChange(val){
            this.multipleSelection = val;
        },
        //列拖拽
        columnDrop() {
            const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
            this.sortable = Sortable.create(wrapperTr, {
                animation: 180,
                delay: 0,
                onEnd: evt => {
                    const oldItem = this.tableColumnList[evt.oldIndex]
                    this.tableColumnList.splice(evt.oldIndex, 1)
                    this.tableColumnList.splice(evt.newIndex, 0, oldItem)
                }
            })
        },
        getIndex(index) {
            this.tableCellIndex = "";
            this.tableCellIndex = index;
        },
        tsetClick(row, column, cell, event) {
            this.columnName = "";
            this.columnName = column.property;
            this.tableCell.tableCellData = "";
            this.tableCell.tableCellData = row[this.columnName];
        },
        //添加表头，修改表头
        headerTest(val) {
            if (val.property == "addTableHeaderName") {
                this.tableColumnList.push({ field: this.num.toString(), label: '点击编辑项目流程名称' })
                for (let i = 0; i < this.tableData.length; i++) {
                    this.$set(this.tableData[i], [parseInt(this.num)], "请添加内容");
                }
                this.num = this.num + 1;
            } else {
                this.tableHeader.tableHeaderName = "";
                this.tableHeader.property = "";
                this.tableHeader.tableHeaderName = val.label;
                this.tableHeader.property = val.property;
                this.dialogForHeader = true;
            }
        },
        //表头编辑提交
        submitForm() {
            for (let i = 0; i < this.tableColumnList.length; i++) {
                if (this.tableColumnList[i].field === this.tableHeader.property) {
                    this.tableColumnList[i].label = this.tableHeader.tableHeaderName;
                    this.col[i].label = this.tableHeader.tableHeaderName;
                }
            }
            this.dialogForHeader = false;
        },
        //表格内容编辑提交
        submitForm1() {
            if (this.tableCellIndex === "" || this.tableCellIndex === null) {
                alert("亲，请精准点击表格中的字进行修改！")
            } else {
                this.tableData[this.tableCellIndex][this.columnName] = this.tableCell.tableCellData;
                this.rush();
            }
        },
        //强制刷新数据
        rush() {
            this.$set(this.tableData);
        },
        //取消表头编辑
        cancel() {
            this.dialogForHeader = false;
        },
        // 操作之后获取最后的宽度
        headerdragend(newWidth, oldWidth, column, event) {
            // 获取当前拖动的是第几个，方便后续检测 DOM 是否已更新
            var currentColIndex = this.tableColumnList.findIndex(item=>item.label == event.target.innerText);
            this.tableColumnList[currentColIndex].wide = newWidth;
            this.col[currentColIndex].wide = newWidth;
        }
    },
}
</script>
<style scoped></style>

element-ui table 表格组件实现可拖拽效果（行、列）_element table 可拖拽-CSDN博客

基于element表格封装一个可编辑表头和拖拽排序的表格_自定义表格表头拖拽-CSDN博客

Vue el-table表头、表格内容，任意格都可编辑实现小白的处女博文，大佬请勿喷（原创不易，转载请注明出处）_el-table实现可编辑表头和表内容的功能-CSDN博客