48 element UI修改表头名称 双击cell修改内容 table拖拽 上下加减数字框

1. 问题：如何更改表头的名称，如何双击单元格切换为输入框，修改表格内容

 <template>
  <div class="app-container">
    <el-table
      border
      :data="tableData"
      style="width: 100%;align: center"
      max-height="550"
      :cell-class-name="tableCellClassName"
      @cell-click="tsetClick"
      @header-click="headerTest"
      @header-contextmenu="headercontextmenu"
    >
      <template v-for="item in tableColumnList">
        <el-table-column
          :key="item.prop"
          :label="item.propName"
          :prop="item.prop"
          :min-width="item.minWidth"
          align="center"
        >
          <template slot-scope="scope">
            <!-- 判断是哪个单元格被点击 -->
            <template
              v-if="scope.row.index === tabClickIndex && scope.column.index === tableCellClickColumnIndex"
            >
              <!-- 被点击的单元格变成输入框 -->
              <el-input
                ref="focusingRef"
                v-model="scope.row[scope.column.property]"
                autofocus
                style="height: 100%"
                placeholder="请输入"
                @blur="inputBlur"
              />
            </template>
            <template v-else>{{ scope.row[scope.column.property] }}</template>
          </template>
        </el-table-column>
      </template>
      <el-table-column width="120" prop="addTableHeaderName" align="center">
        <template slot="header">
          <i class="el-icon-plus" style="font-size: 20px" />
        </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>
export default {
  data() {
    return {
      contextMenuVisible: false,
      tableCellIndex: "", // 列计数器
      columnName: "", // 列名
      tableCell: { tableCellData: "" }, // 表格定义
      dialogForTable: false, // 表格编辑弹出框
      num: 7, // 列个数
      tabClickIndex: null, // 点击的单元格
      tableHeader: { tableHeaderName: "", property: "" }, // 表头定义
      dialogForHeader: false, // 表头编辑弹出框
      // 这里为了简便我就没有调用后台接口获取数据，直接写的假数据  你要用的话可以调用后台接口获取tableColumnList，注意数据格式
      tableColumnList: [
        { prop: "skill", propName: "自我要求" },
        { prop: "Basics", propName: "文案功底" },
        { prop: "taste", propName: "审美能力" },
        { prop: "communicate", propName: "沟通能力" },
        { prop: "study", propName: "学习研究" },
        { prop: "edition", propName: "版本管理" },
        { prop: "experience", propName: "项目经验" },
        { prop: "leadership", propName: "领导力" },
      ],

      tableData: [
        {
          skill: "123",
          Basics: "445",
          taste: "76354",
          communicate: "1231",
          study: "的发放",
          edition: "踩踩踩",
          experience: "vbdf",
          leadership: "哗哗哗",
        },
        {
          skill: "123",
          Basics: "445",
          taste: "76354",
          communicate: "1231",
          study: "的发放",
          edition: "踩踩踩",
          experience: "vbdf",
          leadership: "哗哗哗",
        },
      ],
    };
  },
  methods: {
    getIndex(index) {
      //获取点击的索引
      console.log("index", index);
      this.tableCellIndex = null;
      this.tableCellIndex = index;
    },
    tsetClick(row, column, cell, event) {
      //cel-click 当某个单元格被点击点击事件
      this.tabClickIndex = row.index;
      this.tableCellClickColumnIndex = column.index;

      if (this.$refs.focusingRef != undefined) {
        this.$nextTick(() => {
          // 自动获取焦点 element组件autofocus失效 这个地方还有问题应该
          var refs = this.$refs["focusingRef"].$refs;
          console.log(refs);
        });
      }
    },
    // 添加表头，修改表头
    headerTest(val) {
      //点击表头事件 header-click(column,event)
      if (val.property == "addTableHeaderName") {
        // console.log('这里是表格tou部点击,添加头部事件', val)
        this.tableColumnList.push({
          prop: this.num.toString(),
          propName: "点击编辑表头名称",
        });
        for (let i = 0; i < this.tableData.length; i++) {
          // 向对象中追加属性， 参数 object/Array  property/index   value
          this.$set(this.tableData[i], [parseInt(this.num)], "请添加内容");
        }
        this.num = this.num + 1;
      } else {
        // 点击的不是添加表头表头，则是其他表头
        console.log("这里是表格tou部点击，修改头部事件", val);
        this.tableHeader.tableHeaderName = "";
        this.tableHeader.property = "";
        // tableHeader存储当前被点击头部的label和属性  绑定到弹框的form表单上
        this.tableHeader.tableHeaderName = val.label;
        this.tableHeader.property = val.property;
        // console.log(this.tableHeader.tableHeaderName)
        // 弹框
        this.dialogForHeader = true;
      }
    },
    headercontextmenu(val, event) {
      // 右击
      console.log("val", val);
      // console.log(val.property); //右击获取表头的property 的名称
      event.preventDefault(); // 隐藏浏览器默认右击菜单
      this.$confirm("是否需要删除此列", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableColumnList.splice(val.index, 1); //删除对应的表头
          this.tableData.forEach((item) => {
            //删除对应的表头内容
            delete item[val.property];
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    inputBlur(row, event, column) {
      //失去焦点事件
      this.tabClickIndex = null;
      this.tableCellClickColumnIndex = null;
    },
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex;
      column.index = columnIndex;
    },
    // 表头编辑提交
    submitForm() {
      console.log("点击提交按钮");
      for (let i = 0; i < this.tableColumnList.length; i++) {
        if (this.tableColumnList[i].prop === this.tableHeader.property) {
          this.tableColumnList[i].propName = this.tableHeader.tableHeaderName;
        }
      }
      console.log(this.tableColumnList);
      this.dialogForHeader = false;
    },

    // 取消表头编辑
    cancel() {
      // console.log("点击取消按钮");
      this.dialogForHeader = false;
    },
  },
};
</script>

功能介绍：

1.点击表头弹框出现输入框，修改表头名称

2.右键点击表头添加表头，增加一列（右键浏览器阻止默认事件）e.preventDefault()

3. 双击cell内容，切换为输入框，失去焦点完成修改

2.table拖拽

https://www.cnblogs.com/jin-zhe/p/10181852.htmlhttps://www.cnblogs.com/jin-zhe/p/10181852.html

引入sortable.js的包: npm install sortable.js --save

sortable配置Sortable.js中文网|配置 

<template>
  <div style="width:800px">

    <el-table :data="tableData"
      border
      row-key="id"
      align="left">
     <el-table-column v-for="(item, index) in col"
        :key="`col_${index}`"
        :prop="dropCol[index].prop"
        :label="item.label"> 
      </el-table-column>
    </el-table>
    <pre style="text-align: left">
      {{dropCol}}
    </pre>
    <hr>
    <pre style="text-align: left">
      {{tableData}}
    </pre>
  </div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
  data() {
    return {
      col: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '地址',
          prop: 'address'
        }
      ],
      dropCol: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '地址',
          prop: 'address'
        }
      ],
      tableData: [
        {
          id: '1',
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 100 弄'
        },
        {
          id: '2',
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 200 弄'
        },
        {
          id: '3',
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 300 弄'
        },
        {
          id: '4',
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 400 弄'
        }
      ]
    }
  },
  mounted() {
    this.rowDrop()
    this.columnDrop()
  },
  methods: {
    //行拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
        }
      })
    },
    //列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.dropCol[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
        }
      })
    }
  }
}
</script>

3.上下加减数字框

 <el-input-number v-model="rangeHeight" :min="0" controls-position="right"></el-input-number> 



  ::v-deep .el-input-number {
    .el-input{
      background-color: transparent;
      .el-input__inner{
         background-color: transparent;
         color: #fff;
         text-align: left;
      }
    }
        margin: 12px 0;
        width: 240px;
        border-radius: 4px;
        border: 1px solid rgba(255, 255, 255, 0.6);
        background: transparent;
        backdrop-filter: blur(0px);
       span{
        border:0;
        background-color: transparent;
        color: #fff;
       }
      }