<el-table-column width="160px" prop="callDate" label="专案拨打开始日期" sortable>callDate字段为空时，不参与sortable排序

在使用Vue.js框架结合Element UI组件库开发应用时，`<el-table-column>` 是用来定义表格中的列。当您设置 `sortable` 属性为 `true` 时，该列可被点击以进行排序操作。`prop` 属性指定该列对应的对象属性名，`label` 则是该列的标题。

如果希望在 `callDate` 字段为空时，该列不参与排序，需要在 `el-table` 的数据源中为每个数据项添加一个标识字段，这个字段用来记录该行数据是否可以进行排序。然后，使用 `reserve-selection` 属性结合 `Scoped Slot` 功能来自定义排序逻辑。这通常涉及到监听排序事件，并在事件处理函数中加入条件判断，根据字段是否为空来决定是否对该字段进行排序。

以下是一个简单的示例代码段，展示如何实现该逻辑：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @sort-change="handleSortChange"
  >
    <el-table-column
      width="160px"
      prop="callDate"
      label="专案拨打开始日期"
      sortable
    >
      <template slot-scope="scope">
        <div v-if="scope.row.canSortByCallDate">
          {{ scope.row.callDate }}
        </div>
        <div v-else>
          <!-- 根据实际情况，可以选择不显示，或者显示一个特定的标识 -->
          {{ '未设置' }}
        </div>
      </template>
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // ... 表格数据数组
      ],
    };
  },
  methods: {
    handleSortChange({ prop, order }) {
      if (prop === 'callDate') {
        // 在这里实现自己的排序逻辑，可以调用API或者使用JavaScript数组操作
        // 例如：
        // this.tableData.sort((a, b) => {
        //   if (a.callDate && b.callDate) {
        //     return (a.callDate < b.callDate) ? -1 : ((a.callDate > b.callDate) ? 1 : 0);
        //   } else if (a.callDate) {
        //     return -1;
        //   } else if (b.callDate) {
        //     return 1;
        //   }
        //   return 0;
        // });
        // 注意，上述代码中，若callDate为空，则不参与排序
      }
    }
  }
}
</script>

请注意，上述示例中的 `handleSortChange` 方法需要您根据实际情况实现具体的排序逻辑，同时 `canSortByCallDate` 是一个假设的字段，您需要在数据源中为每条记录添加该字段，并且在添加数据时赋予正确的值以指示该记录的 `callDate` 字段是否可以参与排序。