vue3 使用表格拖拽组件draggable 实现自定义表格

这是官方给出的示例 ,可是我需要在行里面插入图片,如果就使用一个td标签渲染,岂不是解析不了图片

<draggable
  :list="state.list" //行数据
  handle=".move"     //有move样式的行才允许拖拽
  animation="300"    //效果
  @start="onStart"   //开始拖拽事件
  @end="onEnd"       //结束拖拽事件
  tag="tbody"        //渲染的标签
  item-key="name"
>
  <template #item="{ element }">
    <tr>
      <td
        class="move"
        v-for="(header, index) in state.headers"
        :key="header"
      >
        {{ element[header] }}
      </td>
    </tr>
  </template>
</draggable>

 因为element里面是多个对象,我就给他拆分了出来

 <template #item="{ element }">
                <tr class="floating_table_tr">
                  <td class="move">
                    <span>{{ element.contactDescribe }}</span>
                  </td>
                  <td class="move">
                    <span>{{ element.lastOperator }}</span>
                  </td>
                  <td class="move">
                    <span>{{ element.updateTime }}</span>
                  </td>
                  <td class="move">
                    <img src="@assets/merchant/sort.png" alt="" />
                  </td>
                </tr>
              </template>

这样就可以自定义 想写啥写啥,切记,一定得加上   class="move"

.move {
    cursor: move;
  }

此篇文章单纯是为了记录一下,如有写的不好的地方,望各位大神轻喷