el-table表格列拖拽，右击某行进行颜色自定义

第一步：终端下载sortable，执行以下代码在终端

 npm install sortablejs --save

第二步：需要拖拽的页面引入sortablejs

import Sortable from 'sortablejs';

第三步：在表格里增加条件和事件

row-key="id"必须加，需要一个唯一值

因我代码需要对每个方向的原始颜色进行赋值，所以使用了 :row-class-name="tableRowClassName"，不需要原始颜色的时候去除就可，直接使用:row-style="rowTableColor"，以下是针对此类情况的写法

蓝色鼠标移动高亮，红色为颜色赋值，鼠标右击事件

<el-table

            row-key="id"

            :data="dataarray"

            id="tableScroll"            

            :row-class-name="tableRowClassName"

            ref="Table_s"

            style="width: 100%; font-size: 12px; color: #fff"

            class="tableView"

            height="100%"

            v-loading="historicalLoad"

            element-loading-background="rgba(9, 37, 83,.8)"

            border

            highlight-current-row

            :header-cell-style="{

              padding: 0,

              backgroundColor: 'transparent ',

              color: '#A8D6FF !important',

              height: '30px !important',

              fontSize: '13px',

            }"

            :cell-style="{ padding: 0 }"

            @row-click="datachange"

            :row-style="rowTableColor"

            @row-contextmenu="showColorPicker"

          >

 <el-table-column  prop="EquipmentFormat" label="设备制式"  align="center" show-overflow-tooltip></el-table-column>

</el-table>

<!--我的要求是选择器固定几个颜色，此处可换成颜色选择器-->

<div

      v-show="colorPickerVisible"

      style="

        width: 120px;

        background: #092d76;

        height: 120px;

        padding: 10px;

        position: fixed;

      "

      :style="{ top: colorPickerTop + 'px', left: colorPickerLeft + 'px' }"

    >

      <div

        class="demonstration"

        style="color: #fff; font-size: 14px; margin-bottom: 10px"

      >

        标记颜色

      </div>

      <el-select v-model="value" placeholder="请选择">

        <el-option

          v-for="item in options"

          :key="item.value"

          :label="item.label"

          :value="item.value"

        >

        </el-option>

      </el-select>

      <el-button

        size="mini"

        style="float: left; margin-top: 20px;display;inline-block;width:50px"

        @click="colorPickerVisible=false"

        >取消</el-button

      >

      <el-button

        size="mini"

        style="float: right; margin-top: 20px;display;inline-block;width:50px"

        @click="confirmColor()"

        >确认</el-button

      >

    </div>

//拖拽的事件

showColorPicker(event, row, colonm) {

      this.show=false

      this.rowa = event; // 保存当前点击的行数据

      this.colorPickerVisible = true; // 显示颜色控制器弹框

      this.colorPickerTop = colonm.clientY; // 设置弹框的位

      this.colorPickerLeft = colonm.clientX;

    },

//给某行进行自定义值的事件

     rowTableColor({ row, rowIndex }) {

      if(row.color == '#ffffff') return

      return {

        backgroundColor: `${row.color} !important`,

      };    

    },

//选择器确定事件

    confirmColor() {    

      this.rowa.color = this.value;

      this.colorPickerVisible = false; // 隐藏弹框

      this.show=true

    },