Vue-Rate评分组件的相关使用.

Vue-Rate评分组件的相关使用:

基本用法（[ ] 内容为测试内容，可以按照自己代码修改）:

<el-rate
  v-modeal:[value(绑定数值)]
  disabled:[(组件是否可读,默认为:false)]
  :colors="colors"[(评分的组件颜色设置)]
  @change="Change"[(评分改变时触发该事件)]
    >
</el-rate>

<script>
    export default {
    name:"Test",
    data(){
      return{
        value:null,
        colors: ['#99A9BF', '#F7BA2A', '#FF9900']
      }
    },
methods:{
  Change(value) {
      console.log(value);
    }
}
</script>

更多详细: https://element.eleme.cn/#/zh-CN/component/rate (element官网关于Rate评分组件)

进阶用法（与Form表单相结合）：

<el-table-column prop="[number(表单项数值)]" label="评分">
  <template slot-scope="scope">
      <el-rate
        disabled
        v-model="[scope.row.number(绑定该表单项的数值)]"
        :colors="colors">
      </el-rate>
  </template>
</el-table-column>

<script>
    export default {
    name:"Test",
    data(){
      return{
        colors: ['#99A9BF', '#F7BA2A', '#FF9900']
      }
    }
</script>