欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Avue和Element-UI動態(tài)三級表頭的實現(xiàn)

 更新時間:2022年07月21日 17:02:00   作者:不一般的菜瓜  
本文主要介紹了Avue和Element-UI動態(tài)三級表頭的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

需求場景: 業(yè)務(wù)方希望有表格可以體現(xiàn)員工的考勤信息,要具體到上午下午,統(tǒng)計司機上下班打卡所產(chǎn)生的數(shù)據(jù)。產(chǎn)品提出想做成三級表頭根據(jù)頁面查詢條件的年月去動態(tài)生成表格的表頭。三級分別是月份日期,對應(yīng)的星期,以及每天的上午以及下午。

效果如下:

在這里插入圖片描述

Avue配置方式

通過對avue-crud組件的option的配置如下:

{
  label: `${$this.month}月${$this.dateList[0].ri}日`,  // 月份
  headerAlign: 'center',
  children: [
   {
     label: `星期${$this.dateList[0].xq}`,
     headerAlign: 'center',
     children: [
      {
        label: '上午',
        prop: 'oneAmAttendance',
        headerAlign: 'center',
        props: { label: 'name', value: 'code' },
        type: 'select',
        dicData: $this.attendanceTypeList,
        formatter: (row, value, label, column) => {
          try {
            let satData = ''
            $this.attendanceTypeList.find((item) => {
              if (item.code === row.oneAmAttendance) {
                satData = item.name
              }
            })
            return satData
          } catch (e) {
            console.log(e)
          }
        }
       },
       {
         label: '下午',
         prop: 'onePmAttendance',
         headerAlign: 'center',
         props: { label: 'name', value: 'code' },
         type: 'select',
         dicData: $this.attendanceTypeList,
         formatter: (row, value, label, column) => {
           try {
             let satData = ''
             $this.attendanceTypeList.find((item) => {
               if (item.code === row.onePmAttendance) {
                 satData = item.name
               }
             })
             return satData
           } catch (e) {
            console.log(e)
           }
         }
       }
     ]
    }
  ]
 },

在data中聲明需要的變量以及獲取每個月天數(shù)以及對應(yīng)星期的方法

data(){
  return {
    dateList: [], // 日期list
    month: 0, // 選中的月份
    dayNum: 0 // 選中月的天數(shù)
  }
}

created(){
  this.montInfo(GetYearLastMonth())
  // 當(dāng)前月的天數(shù)
  const arr = GetYearLastMonth().split('-')
  this.month = parseInt(arr[1])
  this.dayNum = this.dayNumFn(parseInt(arr[0]), parseInt(arr[1]))
}
methods(){
      // 月日以及對應(yīng)的星期
   montInfo(res) {
      /**
	 * 獲取一個月多少天,并獲取月初星期幾
	 */
      const daxier = ['一', '二', '三', '四', '五', '六', '日'];
      const date = res ? new Date(res) : new Date()
      const y = date.getFullYear()
      const m = date.getMonth() + 1
      var date2 = new Date(y, m, 0)
      var rq = date2.getDate() // 日 本月最后一天

      var xq = date2.getDay(); // 星期 本月第一天星期幾  new Date(0).getDay()
      var rq2 = rq % 7
      if (rq2 === 0) {
        xq = rq2 + 1
      } else {
        if (rq2 > xq) xq += 7
        xq = xq - rq2
      }

      var data = [];
      for (var i = 1; i <= rq; i++) {
        data.push({
          'ri': i,
          'xq': daxier[xq]
        })

        xq = (++xq === 7) ? 0 : xq
      }
      this.dateList = data
    },
    // 獲取選中月的天數(shù)
    dayNumFn(year, month) {
      return new Date(year, month, 0).getDate()
    },
}

根據(jù)查詢條件去切換表頭

{
  label: '年月',
  search: true,
  hide: true,
  searchPlaceholder: '請選擇年月',
  searchClearable: false,
  prop: 'yearMonth',
  type: 'month',
  // 日期組件格式化
  format: 'yyyy-MM', // 展示值
  // 單元格格式化
  valueFormat: 'yyyy-MM', // value
  searchDefault: GetYearLastMonth(),
  pickerOptions: {
    disabledDate: (time) => {
      return time.getTime() > new Date(GetYearLastMonth()).getTime()
    }
  },
  // 查詢條件月份切換的同事重新渲染表頭
  change(value) {
    // 當(dāng)前月的天數(shù)
    $this.montInfo(value.value)
    const arr = value.value.split('-')
    $this.month = parseInt(arr[1])
    $this.dayNum = $this.dayNumFn(parseInt(arr[0]), parseInt(arr[1]))
  }
},

因為不同的月份日期有不同,比如2月只有28天而1月有31天。所以大于28的日期需要單獨處理一下

{
            label: $this.dayNum > 28 ? `${$this.month}月${$this.dateList[28].ri}日` : '',
            headerAlign: 'center',
            hide: $this.dayNum < 28,
            children: [
              {
                label: $this.dayNum > 28 ? `星期${$this.dateList[28].xq}` : '',
                headerAlign: 'center',
                children: [
                  {
                    label: '上午',
                    prop: 'twentyNineAmAttendance',
                    headerAlign: 'center',
                    props: { label: 'name', value: 'code' },
                    type: 'select',
                    dicData: $this.attendanceTypeList,
                    formatter: (row, value, label, column) => {
                      try {
                        let satData = ''
                        $this.attendanceTypeList.find((item) => {
                          if (item.code === row.twentyNineAmAttendance) {
                            satData = item.name
                          }
                        })
                        return satData
                      } catch (e) {
                        console.log(e)
                      }
                    }
                  },
                  {
                    label: '下午',
                    prop: 'twentyNinePmAttendance',
                    headerAlign: 'center',
                    props: { label: 'name', value: 'code' },
                    type: 'select',
                    dicData: $this.attendanceTypeList,
                    formatter: (row, value, label, column) => {
                      try {
                        let satData = ''
                        $this.attendanceTypeList.find((item) => {
                          if (item.code === row.twentyNinePmAttendance) {
                            satData = item.name
                          }
                        })
                        return satData
                      } catch (e) {
                        console.log(e)
                      }
                    }
                  }
                ]
              }
            ]
          },
          {
            label: $this.dayNum > 28 ? `${$this.month}月${$this.dateList[29].ri}日` : '',
            headerAlign: 'center',
            hide: $this.dayNum < 30,
            children: [
              {
                label: $this.dayNum > 28 ? `星期${$this.dateList[29].xq}` : '',
                headerAlign: 'center',
                children: [
                  {
                    label: '上午',
                    prop: 'thirtyAmAttendance',
                    headerAlign: 'center',
                    props: { label: 'name', value: 'code' },
                    type: 'select',
                    dicData: $this.attendanceTypeList,
                    formatter: (row, value, label, column) => {
                      try {
                        let satData = ''
                        $this.attendanceTypeList.find((item) => {
                          if (item.code === row.thirtyAmAttendance) {
                            satData = item.name
                          }
                        })
                        return satData
                      } catch (e) {
                        console.log(e)
                      }
                    }
                  },
                  {
                    label: '下午',
                    prop: 'thirtyPmAttendance',
                    headerAlign: 'center',
                    props: { label: 'name', value: 'code' },
                    type: 'select',
                    dicData: $this.attendanceTypeList,
                    formatter: (row, value, label, column) => {
                      try {
                        let satData = ''
                        $this.attendanceTypeList.find((item) => {
                          if (item.code === row.thirtyPmAttendance) {
                            satData = item.name
                          }
                        })
                        return satData
                      } catch (e) {
                        console.log(e)
                      }
                    }
                  }
                ]
              }
            ]
          },
          {
            label: $this.dayNum === 31 ? `${$this.month}月${$this.dateList[30].ri}日` : '',
            headerAlign: 'center',
            hide: $this.dayNum !== 31,
            children: [
              {
                label: $this.dayNum === 31 ? `星期${$this.dateList[30].xq}` : '',
                headerAlign: 'center',
                children: [
                  {
                    label: '上午',
                    prop: 'thirtyOneAmAttendance',
                    headerAlign: 'center',
                    props: { label: 'name', value: 'code' },
                    type: 'select',
                    dicData: $this.attendanceTypeList,
                    formatter: (row, value, label, column) => {
                      try {
                        let satData = ''
                        $this.attendanceTypeList.find((item) => {
                          if (item.code === row.thirtyOneAmAttendance) {
                            satData = item.name
                          }
                        })
                        return satData
                      } catch (e) {
                        console.log(e)
                      }
                    }
                  },
                  {
                    label: '下午',
                    prop: 'thirtyOnePmAttendance',
                    headerAlign: 'center',
                    props: { label: 'name', value: 'code' },
                    type: 'select',
                    dicData: $this.attendanceTypeList,
                    formatter: (row, value, label, column) => {
                      try {
                        let satData = ''
                        $this.attendanceTypeList.find((item) => {
                          if (item.code === row.thirtyOnePmAttendance) {
                            satData = item.name
                          }
                        })
                        return satData
                      } catch (e) {
                        console.log(e)
                      }
                    }
                  }
                ]
              }
            ]
          },

Element-UI三級表頭動態(tài)寫法

element-ui的寫法相對簡單一些,因為配置項沒辦法進行遍歷渲染。

template里面的寫法

<el-table
    :data="tableData"
    style="width: 100%" >
    <el-table-column
      prop="month"
      label="月份"
      width="150"
      header-align="center">
    </el-table-column>
    <!-- 這里使用遍歷的形式來進行渲染 -->
    <template v-for="(item,index) in dateList" >
      <el-table-column :label="`${month}月${item.ri}日`" header-align="center" :key="'date' + index">
        <el-table-column header-align="center" :label="`星期${item.xq}`" >
          <el-table-column header-align="center" :prop="item.sw" label="上午" width="120" ></el-table-column>
          <el-table-column header-align="center" :prop="item.xw" label="下午" width="120" ></el-table-column>
        </el-table-column>
      </el-table-column>
    </template>
  </el-table>

data中還是聲明變量,methods中還是應(yīng)用和上面類似的方法

data(){
    return {
      dateList: [], // 日期list
      month: 0, // 選中的月份
      dayNum: 0, // 選中月的天數(shù)
    }
  }
  created() {
    this.montInfo(GetYearLastMonth())
    // 當(dāng)前月的天數(shù)
    const arr = GetYearLastMonth().split('-')
    this.month = parseInt(arr[1])
    this.dayNum = this.dayNumFn(parseInt(arr[0]), parseInt(arr[1]))
  },
  methods: {
    // 月日以及對應(yīng)的星期
    montInfo(res) {
      /**
	 * 獲取一個月多少天,并獲取月初星期幾
	 */
      const daxier = ['一', '二', '三', '四', '五', '六', '日'];
      //  這里是每個上午下午展示為不同的變量
      const amArr = ['oneAmAttendance', 'twoAmAttendance', 'threeAmAttendance', 'fourAmAttendance', 'fiveAmAttendance', 'sixAmAttendance', 'sevenAmAttendance', 'eightAmAttendance', 'nineAmAttendance', 'tenAmAttendance', 'elevenAmAttendance', 'twelveAmAttendance', 'thirteenAmAttendance', 'fourteenAmAttendance', 'fifteenAmAttendance', 'oneAmAttendance', 'twoAmAttendance', 'threeAmAttendance', 'fourAmAttendance', 'fiveAmAttendance', 'sixAmAttendance', 'sevenAmAttendance', 'eightAmAttendance', 'nineAmAttendance', 'tenAmAttendance', 'elevenAmAttendance', 'twelveAmAttendance', 'thirteenAmAttendance', 'fourteenAmAttendance', 'fifteenAmAttendance', 'sixteenAmAttendance', 'seventeenAmAttendance', 'eighteenAmAttendance', 'nineteenAmAttendance', 'twentyAmAttendance', 'twentyOneAmAttendance', 'twentyTwoAmAttendance', 'twentyThreeAmAttendance', 'twentyFourAmAttendance', 'twentyFiveAmAttendance', 'twentySixAmAttendance', 'twentySevenAmAttendance', 'twentyEightAmAttendance', 'twentyNineAmAttendance', 'thirtyAmAttendance', 'thirtyOneAmAttendance']
      const pmArr = [
        'onePmAttendance', 'twoPmAttendance', 'threePmAttendance', 'fourPmAttendance', 'fivePmAttendance', 'sixPmAttendance', 'sevenPmAttendance', 'eightPmAttendance', 'ninePmAttendance', 'tenPmAttendance', 'elevenPmAttendance', 'twelvePmAttendance', 'thirteenPmAttendance', 'fourteenPmAttendance', 'fifteenPmAttendance', 'onePmAttendance', 'twoPmAttendance', 'threePmAttendance', 'fourPmAttendance', 'fivePmAttendance', 'sixPmAttendance', 'sevenPmAttendance', 'eightPmAttendance', 'ninePmAttendance', 'tenPmAttendance', 'elevenPmAttendance', 'twelvePmAttendance', 'thirteenPmAttendance', 'fourteenPmAttendance', 'fifteenPmAttendance', 'sixteenPmAttendance', 'seventeenPmAttendance', 'eighteenPmAttendance', 'nineteenPmAttendance', 'twentyPmAttendance', 'twentyOnePmAttendance', 'twentyTwoPmAttendance', 'twentyThreePmAttendance', 'twentyFourPmAttendance', 'twentyFivePmAttendance', 'twentySixPmAttendance', 'twentySevenPmAttendance', 'twentyEightPmAttendance', 'twentyNinePmAttendance', 'thirtyPmAttendance', 'thirtyOnePmAttendance'
      ]
      const date = res ? new Date(res) : new Date()
      const y = date.getFullYear()
      const m = date.getMonth() + 1
      var date2 = new Date(y, m, 0)
      var rq = date2.getDate() // 日 本月最后一天

      var xq = date2.getDay(); // 星期 本月第一天星期幾  new Date(0).getDay()
      var rq2 = rq % 7
      if (rq2 === 0) {
        xq = rq2 + 1
      } else {
        if (rq2 > xq) xq += 7
        xq = xq - rq2
      }

      var data = [];
      for (var i = 1; i <= rq; i++) {
        data.push({
          'ri': i,
          'xq': daxier[xq]
        })

        xq = (++xq === 7) ? 0 : xq
      }
      data.map((item, index) => {
        item.sw = amArr[index]
        item.xw = pmArr[index]
      })
      this.dateList = data
    },
    // 獲取選中月的天數(shù)
    dayNumFn(year, month) {
      console.log(new Date(year, month, 0).getDate())
      return new Date(year, month, 0).getDate()
    }
  }

element-ui渲染的效果

element-ui組件渲染的效果

到此這篇關(guān)于Avue和Element-UI動態(tài)三級表頭的實現(xiàn)的文章就介紹到這了,更多相關(guān)Element 動態(tài)三級表頭內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue?3.0如何配置TypeScript支持(推薦)

    Vue?3.0如何配置TypeScript支持(推薦)

    隨著應(yīng)用的增長,靜態(tài)類型系統(tǒng)可以幫助防止許多潛在的運行時錯誤,這就是為什么Vue 3是用TypeScript編寫的,本文給大家介紹Vue?3.0如何配置TypeScript支持,感興趣的朋友一起看看吧
    2023-12-12
  • vue中使用閉包(防抖和節(jié)流)失效問題

    vue中使用閉包(防抖和節(jié)流)失效問題

    本文主要介紹了vue中使用閉包(防抖和節(jié)流)失效問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • Vue中圖片Src使用變量的方法

    Vue中圖片Src使用變量的方法

    這篇文章主要介紹了Vue中圖片Src使用變量的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-10-10
  • vue中的el-form表單rule校驗問題(特殊字符、中文、數(shù)字等)

    vue中的el-form表單rule校驗問題(特殊字符、中文、數(shù)字等)

    這篇文章主要介紹了vue中的el-form表單rule校驗問題(特殊字符、中文、數(shù)字等),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • vuejs開發(fā)組件分享之H5圖片上傳、壓縮及拍照旋轉(zhuǎn)的問題處理

    vuejs開發(fā)組件分享之H5圖片上傳、壓縮及拍照旋轉(zhuǎn)的問題處理

    這篇文章主要介紹了vuejs開發(fā)組件分享之H5圖片上傳、壓縮及拍照旋轉(zhuǎn)的問題處理,需要的朋友可以參考下
    2017-03-03
  • 簡單聊聊vue3.0 sfc中setup的變化

    簡單聊聊vue3.0 sfc中setup的變化

    這篇文章主要給大家介紹了關(guān)于vue3.0 sfc中setup變化的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2021-10-10
  • Vue動態(tài)加載圖片在跨域時無法顯示的問題及解決方法

    Vue動態(tài)加載圖片在跨域時無法顯示的問題及解決方法

    這篇文章主要介紹了解決VUE動態(tài)加載圖片在跨域時無法顯示的問題,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-03-03
  • vue組件中傳值EventBus的使用及注意事項說明

    vue組件中傳值EventBus的使用及注意事項說明

    這篇文章主要介紹了vue組件中傳值EventBus的使用及注意事項說明,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue 輸入電話號碼自動按3-4-4分割功能的實現(xiàn)代碼

    vue 輸入電話號碼自動按3-4-4分割功能的實現(xiàn)代碼

    這篇文章主要介紹了vue 輸入電話號碼自動按3-4-4分割功能的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-04-04
  • 詳解Vue3中shallowRef和shallowReactive的使用

    詳解Vue3中shallowRef和shallowReactive的使用

    這篇文章主要為大家介紹了Vue3中shallowRef和shallowReactive函數(shù)的使用方法,文中的示例代碼講解詳細(xì),對我們學(xué)習(xí)Vue有一定的幫助,需要的可以參考一下
    2022-07-07

最新評論