Element Plus Playground

Save

Publish

App.vue

<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(() => {

Web View

Console

Grok Code Fast 1

Grok 4.1 Fast Reasoning

Grok 4.1 Fast Non-Reasoning

Gemini Flash (Latest)

Claude Haiku 4.5

GPT-5.1 Codex Mini

Claude Sonnet 4.5

GPT-5.1 Codex

GPT-5.1

Gemini 3 Pro (Preview)

Claude Opus 4.5

OpenAI o3