el-table表头列可拖拽排序

最新推荐文章于 2024-08-09 15:19:05 发布

Time202051

最新推荐文章于 2024-08-09 15:19:05 发布

阅读量1.6k

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45890414/article/details/113609064

版权

本文介绍如何在Vue项目中使用el-table组件实现列头的拖拽排序功能，通过`renderHeader`方法结合鼠标事件处理，提供了一段可直接使用的代码示例和相关样式。

摘要由CSDN通过智能技术生成

<div @mouseleave="moveTableOutside">
      <el-table
        class="drag_table"
        :data="tableData"
        border
        stripe
        :cell-class-name="cellClassName"
        :header-cell-class-name="headerCellClassName"
        style="width: 100%"
      >
        <el-table-column
          v-for="(col, index) in tableHeader"
          :key="index"
          :prop="col.prop"
          :label="col.label"
          :width="col.width"
          :min-width="col.minWidth"
          :type="col.type"
          :header-align="col.headerAlign"
          :column-key="index.toString()"
          :render-header="renderHeader"    //只有这里有用，其他和拖拽没关系
        >
          <template slot-scope="scope">
            <template v-if="DataType(scope.row.col.prop)">{
   {
    scope.row.col.prop }}</template>
            <el-tag
              v-else
              type="success"
              size="normal"
              effect="dark"
              @click="handleShow(scope.row.col.prop)"
            >立即查看</el-tag>
          </template>
        </el-table-column>
        <slot />
      </el-table>
    </div>

这里是 :render-header=“renderHeader” 的逻辑和一些鼠标事件 👇直接复制到methods中就可以

renderHeader(h, {
    column, $index }) {
   
      // 这里可以根据$index的值来对自身需求进行修改，
      return h(
        'span',
        {
   
          class: ['thead-cell'],
          on: {
   
            mousedown: $event => {
   
              this.handleMouseDown($event, column)
            },
            mouseup: $event => {
   
              this.handleMouseUp($event, column)
            },
            mousemove: $event => {
   
              this.