elementui投票

ElementUI 投票组件实现

ElementUI 本身没有直接提供投票组件，但可以通过组合现有组件实现投票功能。以下是几种常见的实现方式：

单选投票实现

<template>
  <el-radio-group v-model="selectedOption">
    <el-radio 
      v-for="option in options" 
      :key="option.value" 
      :label="option.value">
      {{ option.label }}
    </el-radio>
  </el-radio-group>
  <el-button type="primary" @click="submitVote">提交投票</el-button>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'A', label: '选项A' },
        { value: 'B', label: '选项B' }
      ]
    }
  },
  methods: {
    submitVote() {
      console.log('已选择:', this.selectedOption)
    }
  }
}
</script>

多选投票实现

<template>
  <el-checkbox-group v-model="selectedOptions">
    <el-checkbox 
      v-for="option in options" 
      :key="option.value" 
      :label="option.value">
      {{ option.label }}
    </el-checkbox>
  </el-checkbox-group>
  <el-button type="primary" @click="submitVote">提交投票</el-button>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        { value: 'A', label: '选项A' },
        { value: 'B', label: '选项B' }
      ]
    }
  },
  methods: {
    submitVote() {
      console.log('已选择:', this.selectedOptions)
    }
  }
}
</script>

投票结果显示 可以使用进度条组件显示投票结果：

<template>
  <div v-for="result in results" :key="result.label">
    <span>{{ result.label }}</span>
    <el-progress 
      :percentage="result.percentage" 
      :status="result.status">
    </el-progress>
  </div>
</template>

<script>
export default {
  data() {
    return {
      results: [
        { label: '选项A', percentage: 60, status: 'success' },
        { label: '选项B', percentage: 40, status: '' }
      ]
    }
  }
}
</script>

高级投票功能 对于更复杂的投票需求，可以结合使用表单验证：

<template>
  <el-form :model="voteForm" :rules="rules" ref="voteForm">
    <el-form-item prop="selectedOption">
      <el-radio-group v-model="voteForm.selectedOption">
        <el-radio label="A">选项A</el-radio>
        <el-radio label="B">选项B</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-button @click="submitForm('voteForm')">提交</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      voteForm: {
        selectedOption: ''
      },
      rules: {
        selectedOption: [
          { required: true, message: '请选择投票选项', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功')
        }
      })
    }
  }
}
</script>

这些实现方式可以根据具体需求进行调整和组合，ElementUI 的灵活组件系统能够满足大多数投票场景的需求。