Question

我有一个html表。我想拖放列，而不是行。我正在使用vue.js。

拖放行很容易，因为每一行都有自己的父元素，您可以在其中传递draggable="true"。至于列，每个列都包含在其父行中。因此，我无法将本机draggable="true"传递到表的整个列。

然后我找到了这个库：https://github.com/kutlugsahin/vue-smooth-dnd，但这没有给我列拖动选项。

能否请您给我一些建议，以实现我想要的目标？如果可以使用上述插件，效果会更好。谢谢。

Answer 1

我也想在表格中拖动一列。我找到了解决方案。您需要做的就是对thead键重新排序，数据将重新呈现。

<el-table border :data="tableData" size="mini" >
      <el-table-column
        v-for="(item, index) in elTheadList"
        :prop="dataTheadList[index]"
        :label='item'
        :key="`thead_${index}`"
       >
      </el-table-column>
    </el-table>
data() {
    return {
      tableData: [{
        date: '2016-05-01',
        name: 'Cristian Millan',
        address: 'Baja #11'
      },{
        date: '2016-05-02',
        name: 'Jorge Cabrera',
        address: 'Progreso #18'
      },{
        date: '2016-05-03',
        name: 'Armando Mendivil',
        address: 'Novena #12'
      }],
      dataTheadList: [
        'date',
        'name',
        'address'
      ],
      elTheadList: ['Date', 'Name', 'Address'],
    }
  },

mounted() {
   const el = document.querySelector('.el-table__header-wrapper tr')
   this.sortable = Sortable.create(el, {
    animation: 180,
    delay: 0,
    onEnd: evt => {
      const oldItem = this.dataTheadList[evt.oldIndex]
      this.dataTheadList.splice(evt.oldIndex, 1)
      this.dataTheadList.splice(evt.newIndex, 0, oldItem)
    }
  })
  }

Answer 2

我正在使用Element UI中的表，并编写了一个自定义方法来设置拖放操作：

in UrlGenerator.php line 304
at CompilerEngine->handleViewException(object(InvalidArgumentException), 1)in PhpEngine.php line 44

at PhpEngine->evaluatePath('C:\\wamp64\\www\\dbsystem\\storage\\framework\\views/e2e78c3d81e946fdb92174f035a7944bab024389.php', array('__env' => object(Factory), 'app' => object(Application), 'errors' => object(ViewErrorBag), 'record' => object(ConditionsModel)))in CompilerEngine.php line 59

at CompilerEngine->get('C:\\wamp64\\www\\dbsystem\\resources\\views/admin/conditions/edit.blade.php', array('__env' => object(Factory), 'app' => object(Application), 'errors' => object(ViewErrorBag), 'record' => object(ConditionsModel)))in View.php line 137

at View->getContents()in View.php line 120

在安装组件时调用它：

initializeDragAndDropFunctionality() {
  const tableColumn = this.$refs.tableRef.$el.querySelector(
    '.el-table__header-wrapper .el-table__header thead tr'
  );
  Sortable.create(tableColumn, {
    draggable: 'th',
    onEnd: this.dragReorderColumn
  });
}

在表中，您需要为ref设置一个值：

  mounted() {
    this.initializeTable();
  },

该组件导入一个使用Sortablejs的util类：

  <el-table
      ref="tableRef"
    >
      <el-table-column
        v-for="(column, index) in tableTitles"
        :label="column.title"
        :prop="column.field"
        :width="column.width"
      >
      </el-table-column>
    </el-table>

Answer 3

您可以将 vue-draggable-nested-tree 用于可拖动模板。太酷了。

但是对于拖放列，您应该使用 ag-grid 。

检查此documantation


如果您要查找问题的特定部分，请检查this

如何拖放html表列？

3 个答案: