el-date-picker 时间选择器、el-input里面添加单位、el-table 列添加单位

1.0  时间选择器 type="year"年份控制范围

选项需配置 picker-options 对象中的 shortcuts，禁用日期通过 disabledDate 设置，传入函数

<el-date-picker v-model="dataForm.year"
                type="year"
                :picker-options="pickerOptions"
                value-format="yyyy">
</el-date-picker>

<script>
export default {
  data () {
    return {
      // 时间选择器，只能选择 xxxx 年 - 至今的年份
      pickerOptions: {
        disabledDate (time) {
          return (
            time.getFullYear() < 'xxxx' ||
            time.getFullYear() > new Date().getFullYear()
          ) // 注意是 || 不是 && 哦
        }
      }
    }
  }
}
</script>

效果

1.1 开始时间大于等于结束时间

效果

实现代码

<el-date-picker v-model="dataForm.startDate"
                class="width-100"
                type="date"
                clearable
                value-format="yyyy-MM-dd"
                placeholder="年/月/日"
                :picker-options="pickerOptionsStart">
</el-date-picker>
<el-date-picker v-model="dataForm.endDate"
                class="width-100"
                type="date"
                clearable
                value-format="yyyy-MM-dd"
                placeholder="年/月/日"
                :picker-options="pickerOptionsEnd">
</el-date-picker>

<script>
export default {
  data () {
    return {
      // 开始日期限制
      pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.dataForm.endDate) {
            return (
              time.getTime() >= new Date(this.dataForm.endDate).getTime()
            )
          }
        }
      },
      // 结束日期限制
      pickerOptionsEnd: {
        disabledDate: (time) => {
          if (this.dataForm.startDate) {
            return (
              // 结束时间大于开始时间,不能选择同一天
              // time.getTime() <= new Date(this.dataForm.startDate).getTime()
              // 减掉86400000秒(一天) 目的是 把当前选中的开始日期包含在内可以选择，也就是说在选择结束日期时，可以选择当前开始日期
              time.getTime() <= new Date(this.dataForm.startDate).getTime() - 86400000
            )
          }
        }
      }
    }
  }
}
</script>

2. el-input 内部末尾添加单位

实现代码

<el-form-item prop="rate"
              label="输入利用率">
   <el-input v-model="dataForm.rate"
             clearable>
        <i slot="suffix" style="font-style:normal;margin-right: 10px;">%</i>
   </el-input>
</el-form-item>

3. el-table 列添加单位

<el-table-column prop="month"
                 label="月份"
                 header-align="center"
                align="center">
     <template slot-scope="scope">
              <div v-if="dataList&&dataList.length>0&&scope.$index===dataList.length-1">{{ scope.row.month }}</div>
              <div v-else>{{ scope.row.month }}月</div>
     </template>
</el-table-column>

效果