[element ui + vue2] el-table根据不同的条件展示不同金额、与时间选择器嵌套（根据不同条件对日期选择进行可选以及不可选）

效果要求：

1.月份应收金额=购买时长括号内的金额*车位数，天数应收金额=购买时长括号内的金额*车位数*天数（仅限定一天）；

2.实收金额自由输入任意金额；

3.月份开始日期选择范围必须大于当前有效期的截止日期（如当前有效期2024-11-21 ~ 2024-12-21，延期开始日期必须大于2024-12-21，同理，截止有效日期必须大于延期开始日期）

4.当购买时长为月份为单位的时候，延期截止日期必须是不可选，而且和延期开始日期联动，天为单位的时候，延期截止日期自由选择。

html:

 <el-table-column prop="purchaseTime" header-align="center" align="center" label="延期时长" min-width="40">
                </el-table-column>
                <el-table-column prop="state" header-align="center" align="center" label="月卡状态" min-width="40"
                    v-if="deLayType == 1">
                    <template slot-scope="scope">
                        <el-tag type="danger" v-if="scope.row.state === 2">过期</el-tag>
                        <el-tag type="primary" v-else>正常</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="ysMoney" header-align="center" align="center" label="应收金额" min-width="40"
                    v-if="deLayType == 1">
                    <template slot-scope="scope">
                        <span>{{ getChargeMoney(scope.row) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="chargeMoney" header-align="center" align="center" label="实收金额" min-width="40"
                    :render-header="addRedStar" v-if="deLayType == 1">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.chargeMoney" placeholder="" type="number"></el-input>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" label="当前有效期" min-width="100">
                    <template slot-scope="scope">
                        <span>{{ getYmd(scope.row.startTime) }} ~ {{ getYmd(scope.row.endTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="startTimes" header-align="center" align="center" label="延期开始日期" min-width="100" :render-header="addRedStar">
                    <template slot-scope="scope">
                        <el-date-picker v-model="scope.row.startTimes" type="date" placeholder="选择日期"
                            @change="onStartTimeChange($event, scope.row)" :picker-options="pickerOptions(scope.row)">
                        </el-date-picker>
                    </template>
                </el-table-column>
                <el-table-column prop="endtimes" header-align="center" align="center" label="延期截止日期" min-width="100" :render-header="addRedStar">
                    <template slot-scope="scope">
                        <el-date-picker v-model="scope.row.endtimes" type="date" :disabled="dayDisabled" :placeholder="scope.row.cycleUnit == '月'? '选择日期':'请先选择开始日期'"
                        :picker-options="pickerOptions_1(scope.row)">
                        </el-date-picker>
                    </template>
                </el-table-column>

需求点：

1.

   getChargeMoney(row) {
            const price = (() => {
                const { purchaseTime, carPorts } = row
                const price = getNumber(purchaseTime)
                
                const { cycleUnit, cycle } = row
                if (cycleUnit === '月') {
                    return price * carPorts
                }

                const { startTimes, endtimes } = row
                if (startTimes && endtimes && endtimes > startTimes) {
                    const diff = Math.floor((endtimes.getTime() - startTimes.getTime()) / 86400000)
                    return diff * price * carPorts
                }
                return price
            })()
            this.$set(row, 'ysMoney', price)
            return price
        },

/**
 * 获取中文括号内的字符串（）
 */
export const getNumber = str => {
  if (str) {
    let regex = /（(.+?)）/g;
    str = str.match(regex)[0];
    str = str.substring(1, str.length - 1);
    return str;
  }
};

2.简单，直接v-model="scope.row.chargeMoney"

3.

 computed: {
        pickerOptions() {
            return function (row = {}) {
                return {
                    disabledDate(time) {
                        let that = this
                        let times = row.endTime
                        return time.getTime() < Date.parse(new Date(times))
                    }
                }
            }
        },
        pickerOptions_1() {
            return function (row = {}) {
                return {
                    disabledDate(time) {
                        let that = this
                        let times = row.startTimes
                        return time.getTime() < Date.parse(new Date(times))
                    }
                }
            }
        }
    },

4.三元表达式区分选择器。（按照周期提加月份），dayDisabled 默认值为true

  onStartTimeChange(value, row) {
            if (row.cycleUnit == '月') {
                if (value instanceof Date) {
                    const date = new Date(value)
                    date.setMonth(date.getMonth() + row.cycle)
                    this.$set(row, 'endtimes', date)
                }
            }
            if(row.cycleUnit == '天' && value && !row.endtimes){
                this.dayDisabled = false
            }
        },