el-table-draggable 首行行禁止拖拽

您好，针对您的问题，您可以通过设置el-table-draggable组件的handle参数来实现首行行禁止拖拽的效果。

具体做法是，在el-table-draggable组件中的列定义中，为第一列添加一个class名称，例如"first-column"，然后在el-table-draggable组件的handle参数中设置一个选择器，选择器为除了第一列之外的所有列，例如".el-table__body-wrapper .el-table__row:not(.first-column)"，即可实现首行行禁止拖拽的效果。

示例代码如下：

<el-table-draggable :data="tableData" :columns="tableColumns" :handle="'.el-table__body-wrapper .el-table__row:not(.first-column)'"></el-table-draggable>

其中，tableData和tableColumns为数据和列定义，可根据实际情况进行替换。

相关问题

el-table-draggable 第一行禁止拖拽

您好！针对您的问题，您可以在使用 el-table-draggable 组件时，通过设置第一行的 `index` 值为 `-1` 来禁止拖拽第一行。具体实现代码如下：

<el-table-draggable :data="tableData" :index="indexMethod">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table-draggable>

indexMethod(index) {
  if (index === 0) {
    return -1;
  } else {
    return index;
  }
}

其中，`indexMethod` 是一个方法，用于设置每一行的 `index` 值，从而实现禁止拖拽第一行的功能。在该方法中，如果 `index` 为 0，则返回 -1，否则返回原有的 `index` 值。这样，在渲染表格时，第一行的 `index` 值就被设置为 -1，从而禁止了拖拽操作。希望对您有所帮助！

el-table-draggable 表格某一行禁止拖拽

在 `el-table-draggable` 中禁止某一行拖拽，可以通过在数据中添加一个 `disabled` 属性，然后在组件中根据该属性来动态设置某一行的拖拽状态。以下是示例代码：

<template>
  <div>
    <el-table-draggable :data="tableData" :columns="tableColumns" @drag-drop="handleDragDrop">
    </el-table-draggable>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, date: '2021-01-01', name: 'John', address: 'New York', disabled: true },
        { id: 2, date: '2021-01-02', name: 'Jane', address: 'Paris', disabled: false },
        { id: 3, date: '2021-01-03', name: 'Bob', address: 'London', disabled: false }
      ],
      tableColumns: [
        { prop: 'date', label: 'Date', width: 180 },
        { prop: 'name', label: 'Name', width: 180 },
        { prop: 'address', label: 'Address' }
      ]
    };
  },
  methods: {
    handleDragDrop(draggingRow, dropRow) {
      if (dropRow.disabled) {
        return false; // 禁止拖拽到禁止拖拽的行
      } else {
        // 处理拖拽操作
      }
    }
  }
};
</script>

在数据中添加一个 `disabled` 属性，然后在 `handleDragDrop` 方法中，根据该属性来判断行是否禁止拖拽，如果禁止，则返回 false，否则处理拖拽操作。