elementUI table中动态设置datepicker的禁用日期disabledDate

在Element UI的Table组件中，你可以使用disabledDate属性来动态设置DatePicker组件的禁用日期。你需要为每一行数据提供一个函数来计算禁用日期，这样每行的禁用日期规则可以不同。

以下是一个简单的例子，展示了如何在Table的每一行中使用disabledDate：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
      <template slot-scope="scope">
        <el-date-picker
          v-model="scope.row.date"
          type="date"
          placeholder="选择日期"
          :disabled-date="disabledDateCallback(scope.row)"
        >
        </el-date-picker>
      </template>
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '' },
        // ... 其他行数据
      ]
    };
  },
  methods: {
    disabledDateCallback(row) {
      return time => {
        // 基于行数据计算禁用日期的逻辑
        // 例如，如果行数据有一个属性叫 'disableBefore'，则禁用该日期之前的日期
        if (row.disableBefore) {
          return time.getTime() < new Date(row.disableBefore).getTime();
        }
        // 默认情况下不禁用任何日期
        return false;
      };
    }
  }
};
</script>

在这个例子中，disabledDateCallback方法接收当前行的数据作为参数，并返回一个函数。这个返回的函数是disabledDate属性真正需要的函数类型，它接收当前日期作为参数，并返回一个布尔值，表示该日期是否被禁用。根据行数据来计算具体的禁用逻辑。