Vue + Element UI 实现了一个周选择器

如上图,下面贴代码

<template>
  <div>
    <el-date-picker size="large"
      style ="width:120px"
      v-model="selectYear"
      format="yyyy 年"
      value-format="yyyy"
      type="year"
      :clearable = "false"
      placeholder="选择年">
    </el-date-picker>
    <el-date-picker size="large"
      style ="width:120px"
      v-model="selectMonth"
      format="MM 月"
      value-format="MM"
      type="month"
      :clearable = "false"
      placeholder="选择月">
    </el-date-picker>
    <el-button type="success" @click="setToday">本周</el-button>
    <el-button type="info" @click="lastWeek">&lt;&lt;</el-button>
    <el-button type="info" @click="nextWeek">&gt;&gt;</el-button>
    <span>{{weekStart}}</span>
    <span>~</span>
    <span>{{weekEnd}}</span>
  </div>
</template>
<script>
import _ from 'lodash'
export default {
  data () {
    return {
      currentDate: new Date()
    }
  },
  mounted () {
    this.currentDate = new Date()
    this.setCallback()
  },
  computed: {
    selectYear: {
      get: function () {
        return this.$moment(this.currentDate).format('YYYY')
      },
      set: function (newValue) {
        let _date = newValue + '-' + this.selectMonth + '-' + '01'
        this.currentDate = this.$moment(_date).toDate()
        this.setCallback()
      }
    },
    selectMonth: {
      get: function () {
        return this.$moment(this.currentDate).format('MM')
      },
      set: function (newValue) {
        let _date = this.selectYear + '-' + newValue + '-' + '01'
        this.currentDate = this.$moment(_date).toDate()
        this.setCallback()
      }
    },
    weekStart () {
      return this.getTime(this.currentDate, 0)
    },
    weekEnd () {
      return this.getTime(this.currentDate, -6)
    }
  },
  methods: {
    lastWeek () {
      this.currentDate = this.$moment(this.currentDate).subtract(7, 'days').toDate()
      this.setCallback()
    },
    nextWeek () {
      this.currentDate = this.$moment(this.currentDate).add(7, 'days').toDate()
      this.setCallback()
    },
    setToday () {
      this.currentDate = new Date()
      this.setCallback()
    },
    setCallback () {
      if (this.weekStart && this.weekEnd) {
        // 把开始天和结束天相隔的所有日期天放入一个数组保存
        let diffDate = []
        let days = this.$moment(this.weekEnd).diff(this.weekStart, 'days')
        for (let i = 0; i <= days; i++) {
          diffDate.push(this.$moment(this.weekStart).add(i, 'days').format('YYYY-MM-DD'))
        }
        this.$emit('callback', this.weekStart, this.weekEnd, diffDate)
      }
    },
    // 上周的开始时间
    // console.log(getTime(7));
    // 上周的结束时间
    // console.log(getTime(1));
    // 本周的开始时间
    // console.log(getTime(0));
    // 本周的结束时间
    // console.log(getTime(-6));
    // 下周的开始时间
    // console.log(getTime(-7));
    // 下周结束时间
    // console.log(getTime(-13));
    getTime (selectDate, n) {
      let coloneSelectDate = _.cloneDeep(selectDate)
      let year = selectDate.getFullYear()
      // 因为月份是从0开始的,所以获取这个月的月份数要加1才行
      let month = coloneSelectDate.getMonth() + 1
      let date = coloneSelectDate.getDate()
      let day = coloneSelectDate.getDay()
      // 判断是否为周日,如果不是的话,就让今天的day-1(例如星期二就是2-1)
      if (day !== 0) {
        n = n + (day - 1)
      } else {
        n = n + day
      }
      if (day) {
        // 这个判断是为了解决跨年的问题,月份是从0开始的
        if (month <= 1) {
          year = year - 1
          month = 12
        }
      }
      coloneSelectDate.setDate(coloneSelectDate.getDate() - n)
      year = coloneSelectDate.getFullYear()
      month = coloneSelectDate.getMonth() + 1
      date = coloneSelectDate.getDate()
      let s = year + '-' + (month < 10 ? ('0' + month) : month) + '-' + (date < 10 ? ('0' + date) : date)
      return s
    }
  }
}
</script>

 用了一下lodash库的深度拷贝函数,不喜欢自己去掉实现自己的函数也可以,反正我是拿来主义

使用代码

<template>
  <week-selector @callback="afterSelectWeek"></week-selector>
<template>
<script>
import WeekSelector from '@/components/WeekSelector.vue'
import _ from 'lodash'
export default {
  data () {
    return {
      innerWeekStart: null,
      innerWeekEnd: null,
      innerDiffDate: [],
    }
  },
  methods: {
    afterSelectWeek (weekStart, weekEnd, diffDate) {
      if (weekStart && weekEnd && diffDate) {
        this.innerWeekStart = this.$moment(weekStart + ' ' + '00:00:00').toDate()
        this.innerWeekEnd = this.$moment(weekEnd + ' ' + '23:59:59').toDate()
        this.innerDiffDate = diffDate
      }
    },
  }
}
</script>

选择周以后,通过callback回调函数获得选择周的开始日期,结束日期,以及这一周的每一天(结果放到了diffDate数组里面)

Vue Element UI提供了el-pagination组件来实现表格数据的分页功能。以下是实现步骤: 1. 在Vue组件中引入el-pagination组件并定义分页属性 ``` <template> <div> <el-table :data="tableData" border> //表格内容 </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> </template> <script> export default { data() { return { tableData: [], //表格数据 total: 0, //总记录数 pageSize: 10, //每页记录数 currentPage: 1 //当前页码 }; }, methods: { handleSizeChange(val) { this.pageSize = val; this.getData(); }, handleCurrentChange(val) { this.currentPage = val; this.getData(); }, getData() { //获取数据,并更新this.tableData和this.total } } }; </script> ``` 2. 在el-pagination组件中绑定事件和属性 - @size-change:当每页显示条数改变时触发的事件,调用handleSizeChange方法更新pageSize并重新获取数据。 - @current-change:当当前页码改变时触发的事件,调用handleCurrentChange方法更新currentPage并重新获取数据。 - :current-page:当前页码,绑定到currentPage属性。 - :page-sizes:每页显示条数数组,可以自定义,默认为[10, 20, 30, 40]。 - :page-size:每页显示条数,绑定到pageSize属性。 - layout:分页组件布局。其中total表示总记录数,sizes表示每页显示条数选择器,prev表示上一页按钮,pager表示页码按钮,next表示下一页按钮,jumper表示跳转输入框和确定按钮。 - :total:总记录数,绑定到total属性。 3. 在getData方法中获取数据并更新表格数据和总记录数 ``` getData() { //计算分页查询的参数 const start = (this.currentPage - 1) * this.pageSize; const limit = this.pageSize; //发起分页查询请求 axios.get('/api/data', { params: { start, limit } }).then(response => { this.tableData = response.data.rows; //更新表格数据 this.total = response.data.total; //更新总记录数 }); } ``` 以上就是使用Vue Element UI实现表格数据分页功能的步骤。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值