antd-design-vue a-ranger-picker 部分功能的项目总结

antd-vue使用方面小功能总结

1 a-range-picker

<a-range-picker
         :disabled-date="disabledDate"
          v-model="priceRangeDate"
          @calendarChange="calendarPriceRangeChange"
            @change="changePriceRangeDate"
 >
  <a-icon
     slot="suffixIcon"
     type="calendar"
   />
  </a-range-picker>

实现功能，默认选择的是最近一个星期的时间，如果当选择某个时间后，再选择只能选择已选时间的前后一段范围 比如一个星期 一个月等

//vue部分
import moment from 'moment'
<script>
data(){
     // 现在的时间
	 priceRangeDate: [],
	 offsetDays: 86400000 * 365,  // 最多选择365天
	 selectPriceDate: '',
},
methods:{
       // 获取最近指定几天日期的函数
    getDay (day) {
      const today = new Date()
      const targetdayMilliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
      today.setTime(targetdayMilliseconds)
      const tYear = today.getFullYear()
      let tMonth = today.getMonth()
      let tDate = today.getDate()
      tMonth = this.doHandleMonth(tMonth + 1)
      tDate = this.doHandleMonth(tDate)
      return tYear + '-' + tMonth + '-' + tDate
    },
    doHandleMonth (month) {
      let m = month
      if (month.toString().length === 1) {
        m = '0' + month
      }
      return m
    },
   //相关函数
    // 选择完时间 清空限制
    changePriceRangeDate (value) {
      this.selectPriceDate = ''
      const valueTime = value.map(item => {
        return moment(item).format('YYYY-MM-DD')
        // return moment(item, 'YYYY-MM-DD').valueOf()
      })
      // ajax请求 可有可无具体看需求
      this.getSelectRangeTime({ startTime: valueTime[0], endTime: valueTime[1], groupId: this.acceptGroupId })
    },
    // 选择开始时间/结束时间
    calendarPriceRangeChange (date) {
      this.selectPriceDate = date[0]
    },
     // 根据选择的开始时间/结束时间，动态渲染要禁用的日期
    disabledDate (current) {
      if (this.selectPriceDate) {
        const selectV = moment(this.selectPriceDate, 'YYYY-MM-DD').valueOf()
        return current > moment(new Date(selectV + this.offsetDays), 'YYYY-MM-DD') || current > moment().endOf('day') || current < moment(new Date(selectV - this.offsetDays), 'YYYY-MM-DD')
        
      } else {
        return current && current > moment().endOf('day')
      }
    },
}
</script>

这个功能结束

2 a-table 异步展开

<a-table
            :loading="loading"
            :columns="columns"
            :data-source="data"
            :expandIcon="customExpandIcon"
            :expandedRowKeys="expandedRowKeys"
            :rowKey="(record) => record.key || record.iid"
            @expand="fatherExpand"
            :pagination="pagination"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onChange,getCheckboxProps }"
            :indentSize="16"
    />
  <script>
   // 修改自定义图标
    customExpandIcon (props) {
      // 是否有子项，无子项不展示图标
      // props.record.flag为true是有展开项，为falses是没有展开项，这个字段后端返回的
      if (props.record && !!props.record.flag) {
        if (props.expanded) {
          return <a-icon style='color: rgba(0,0,0,0.5);margin-right: 3px;' component={IconCaretDown} onClick={e => {
            props.onExpand(props.record, e)
          }} />
        } else {
          return <a-icon style='color: rgba(0,0,0,0.5);margin-right: 3px;' component={IconCaretRight} onClick={e => {
            props.onExpand(props.record, e)
          }} />
        }
      } else {
        return <span style="padding-left: 21px;" />
      }
    },
   // 树节点展开方法
    fatherExpand (expanded, record) {
      if (expanded) {
       //获取后端数据
        this.getChild(record)
        this.expandedRowKeys.push(record.iid)
      } else {
        this.expandedRowKeys.splice(this.expandedRowKeys.indexOf(record.iid), 1)
      }
    },
  </script>