# element-plus 代码示例

<template>
  <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
    <!-- 自定义成员组件 -->
    <el-form-item label="成员信息" prop="members">
      <CustomMembers v-model="form.members" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import CustomMembers from './CustomMembers.vue'

interface Member {
  name: string
  age: number | null
}
const form = reactive({ members: [] as Member[] })
const formRef = ref<FormInstance>()

const validateMembers = (_rule: any, value: Member[], callback: (error?: Error) => void) => {
  if (!value || value.length === 0) {
    return callback(new Error('请至少添加一个成员'))
  }
  for (let i = 0; i < value.length; i++) {
    const member = value[i]
    if (!member.name || member.name.trim() === '') {
      return callback(new Error(`第 ${i + 1} 个成员的姓名不能为空`))
    }
    if (member.age === null || member.age === undefined) {
      return callback(new Error(`第 ${i + 1} 个成员的年龄不能为空`))
    }
  }
  callback()
}

const rules: FormRules = {
  members: [{ required: true, validator: validateMembers, trigger: 'change' }]
}
const submitForm = () => {
  formRef.value?.validate(valid => {
    if (valid) {
      console.log('提交成功', form.members)
    } else {
      console.log('校验失败')
    }
  })
}
const resetForm = () => {
  formRef.value?.resetFields()
}
</script>

<template>
  <div>
    <div
      v-for="(member, index) in internalValue"
      :key="index"
      style="margin-bottom: 10px"
    >
      <el-input
        v-model="member.name"
        placeholder="请输入姓名"
        style="width: 200px; margin-right: 10px"
        @input="updateValue"
      />
      <el-input-number v-model="member.age" :min="0" placeholder="请输入年龄" @change="updateValue" />
      <el-button
        type="danger"
        @click="removeMember(index)"
        style="margin-left: 10px"
      >删除</el-button>
    </div>

    <el-button type="primary" @click="addMember">添加成员</el-button>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, watch, ref } from 'vue'

interface Member {
  name: string
  age: number | null
}

const props = defineProps<{
  modelValue: Member[]
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: Member[]): void
}>()

const internalValue = ref<Member[]>([])

watch(
  () => props.modelValue,
  (val) => {
    internalValue.value = [...val] // // 保证本地 state 跟外部父组件传入的 modelValue 保持同步
  },
  { immediate: true, deep: true }
)

const updateValue = () => {
  emit('update:modelValue', internalValue.value)
}

const addMember = () => {
  internalValue.value.push({ name: '', age: null })
  updateValue()
}

const removeMember = (index: number) => {
  internalValue.value.splice(index, 1)
  updateValue()
}
</script>

<template>
  <div>
    <el-checkbox-group
      :model-value="modelValue"
      @change="handleChange"
    >
      <el-checkbox
        v-for="user in allUsers"
        :key="user.id"
        :label="user"
      >
        {{ user.name }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

interface User {
  id: number
  name: string
}

const props = defineProps<{
  modelValue: User[]
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: User[]): void
}>()

const allUsers: User[] = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' }
]

function handleChange(val: User[]) {
  emit('update:modelValue', val)
}
</script>

<el-table-column label="姓名和地址">
  <template #default="{ row, $index }">
    <p><strong>姓名：</strong>{{ row.name }}</p>
    <p><small>行号：{{ $index + 1 }}</small></p>
  </template>
</el-table-column>
<el-table-column prop="name" label="姓名">
  <template #default="{ row, column }">
    <div>
      {{ row.status }}
      属性名: {{ column.property }} <!-- 输出 'name' -->
      <br>
      列标签: {{ column.label }} <!-- 输出 '姓名' -->
      <br>
      单元格值: {{ row[column.property] }} <!-- 等同于 row.name -->
    </div>
  </template>
</el-table-column>

<template>
  <el-date-picker
    v-model="range"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :disabled-date="disabledRange"
    @calendar-change="onCalendarChange"
    @visible-change="onVisibleChange"
  />
</template>

<script setup>
import { ref } from 'vue';

/* 正式绑定的值 */
const range = ref([]);

/* 保存日历面板的“中间选择”状态：
   calendar-change 回调会传 [Date|null, Date|null]，
   例如：第一次点 start 时可能是 [startDate, null] */
const tempRange = ref([null, null]);

// calendar-change 事件回调（当面板上的选择发生变化时触发 - 仅 range 模式）
const onCalendarChange = (val) => {
  tempRange.value = val || [null, null];
};

// 面板显示/隐藏变化：隐藏时清空临时状态，防止残留
const onVisibleChange = (visible) => {
  if (!visible) tempRange.value = [null, null];
};

// 禁用逻辑：如果已选 start -> 禁用 start + 7 天以外的结束日期
const disabledRange = (time) => {
  const day = 24 * 60 * 60 * 1000;
  const date = time;

  const [start, end] = tempRange.value;

  // 选了开始日期（第一步）
  if (start && !end) {
    const maxEnd = new Date(start.getTime() + 7 * day);
    return date.getTime() > maxEnd.getTime();
  }

  // 选了结束日期（倒选，第一步选的是结束）
  if (end && !start) {
    const minStart = new Date(end.getTime() - 7 * day);
    return date.getTime() < minStart.getTime();
  }

  // 如果两者都有或都没有（未交互或已确认），则不在这里强行禁用额外日期
  return false;
};
</script>