<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// State
const tableData = ref([
{ id: 1, name: 'Alice Johnson', email: 'alice@example.com', role: 'Admin', status: 'active' },
{ id: 2, name: 'Bob Smith', email: 'bob@example.com', role: 'User', status: 'active' },
{ id: 3, name: 'Carol White', email: 'carol@example.com', role: 'User', status: 'inactive' },
{ id: 4, name: 'David Brown', email: 'david@example.com', role: 'Editor', status: 'active' },
])
const dialogVisible = ref(false)
const formData = ref({ name: '', email: '', role: 'User' })
const searchQuery = ref('')
const sliderValue = ref(65)
const switchValue = ref(true)
const selectedDate = ref('')
const loading = ref(false)
// Computed
const filteredData = computed(() => {
if (!searchQuery.value) return tableData.value
return tableData.value.filter(row =>
row.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
row.email.toLowerCase().includes(searchQuery.value.toLowerCase())
)
})
// Methods
const openDialog = () => {
formData.value = { name: '', email: '', role: 'User' }
dialogVisible.value = true
}
const addUser = () => {
if (!formData.value.name || !formData.value.email) {
ElMessage.warning('Please fill all fields')
return
}
tableData.value.push({
id: Date.now(),
name: formData.value.name,
email: formData.value.email,