徐州手机网站制作,海南响应式网站建设方案,中国营销传播网,网页登录界面制作el-table 表格拖拽 表头可修改 宽度自定义 宽度自定义
header-dragendheaderdragend操作之后获取最后的宽度
headerdragend(newWidth, oldWidth, column, event) {// 获取当前拖动的是第几个#xff0c;方便后续检测 DOM 是否已更新var currentColIndex this.t… el-table 表格拖拽 表头可修改 宽度自定义 宽度自定义
header-dragendheaderdragend操作之后获取最后的宽度
headerdragend(newWidth, oldWidth, column, event) {// 获取当前拖动的是第几个方便后续检测 DOM 是否已更新var currentColIndex this.tableColumnList.findIndex(itemitem.label event.target.innerText);this.tableColumnList[currentColIndex].wide newWidth;this.col[currentColIndex].wide newWidth;
}
templatediv classapp-containerdivel-form :modelqueryParams refqueryForm sizesmall v-showshowSearch label-width68pxel-row :gutter24el-col :span10el-form-item label任务名称 propjobNameel-input v-modelqueryParams.jobName placeholder请输入任务名称 clearable //el-form-item/el-colel-col :span10el-form-itemel-button typeprimary iconel-icon-search sizemini搜索/el-buttonel-button iconel-icon-refresh sizemini重置/el-button/el-form-item/el-col/el-row/el-form/divdivel-row :gutter8 classmb8el-col :span1.5el-button typeprimary plain iconel-icon-plus sizemini新增/el-button/el-colel-col :span1.5el-button typesuccess plain iconel-icon-edit sizemini修改/el-button/el-colel-col :span1.5el-button typedanger plain iconel-icon-delete sizemini删除/el-button/el-colel-col :span1.5el-button typewarning plain iconel-icon-download sizemini导出/el-button/el-colright-toolbar :columnscolumns :showSearch.syncshowSearch/right-toolbar/el-row/divel-table :datatableData border row-keyid stylewidth: 100%; cell-clicktsetClickheader-clickheaderTest header-dragendheaderdragendel-table-column v-for(item, index) in col aligncenter show-overflow-tooltip :keycol_${index}:propertyitem.field :widthitem.wide:proptableColumnList[index].field :labelitem.labeltemplate slot-scopescopespan clickgetIndex(scope.$index){{scope.row[scope.column.property]}}/span/template/el-table-column/el-tableel-dialog :visible.syncdialogForHeader title修改表头名称 width800el-form refform :modeltableHeader label-width80pxel-form-item label表头名称el-input v-modeltableHeader.tableHeaderName placeholder请输入表头名称 //el-form-item/el-formdiv slotfooter classdialog-footerel-button typeprimary clicksubmitForm确 定/el-buttonel-button clickcancel取 消/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(itemitem.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博客
