Bgy development small example

One , Modify the corresponding data with different resolutions

onMounted(() => {
      redirectPage()
})
const redirectPage = () => {
   if (screen.width >= 1900) {
       state.percentNum = '40%'
     } else {
        state.percentNum = '70%'
    }
}

Two 、 modify elementui Scroll bar size modification for

 In a scss In file ：
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border-radius: 999px;

  /* border: 10px solid transparent; */
}

::-webkit-scrollbar-track {
  /* box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset; */
  background: #f2f3f8;
}

::-webkit-scrollbar-thumb {
  min-height: 10px;
  background: #cdcdcd;
  background-clip: content-box;

  /* box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2) inset; */
}

::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

3、 ... and 、elementui Form validation failed , Scroll to the no pass position

if (valid) {
  console.log(' Verification passed ', valid)
} else {
  console.log(' Verification failed !!')
  const errorDiv = document.getElementsByClassName('is-error')
  errorDiv[0].scrollIntoView({// Scroll to the specified node 
      block: 'center', // Value has start,center,end,nearest, Currently displayed in the middle of the view area 
      behavior: 'smooth', // Value has auto、instant,smooth, Slow motion animation （ It's slow at the moment ）
  })
  return false
}

Four 、 Recursive implementation of multi-level

5、 ... and 、elementui Form validation of forms

<el-form ref="dailogFormRef" :model="dailogForm" :rules="daiRules">
  <el-table :data="dailogForm.gridData">
    <el-table-column prop="quantity" label=" The amount of work " width="200" align="center">
         <template #header>
            <span> The amount of work </span>
            <br />
            <span>（B）</span>
         </template>
         <template #default="scope">
                <el-form-item
                  label=" "
                  :prop="`gridData.${scope.$index}.quantity`"
                  :rules="daiRules.quantity"
                >
                  <el-input v-model="scope.row.quantity"></el-input>
                </el-form-item>
         </template>
     </el-table-column>
 </el-table>
</el-form>

data(){
    return {
        dailogForm:{
            gridData:[]
        },
        daiRules:{
            quantity: [{ required: true, message: ' Please fill in the quantities ', trigger: 'blur' }],
        }
    }
}

Tree table control expands the specified level

    // Recursive modification 
    function recursionExpand(data, status, level) {
      data.forEach((item) => {
        tableRef.value.toggleRowExpansion(item, status)
        if (item.children) {
          // Switch all 
          if (level === 0) {
            recursionExpand(item.children, status, level)
          } else {
            // Other grades ; Like driving 2 level 
            if (item.levelGroup < level) {
              recursionExpand(item.children, status, level)
            } else {
              // Greater than the current level 
              recursionExpand(item.children, !status, level)
            }
          }
        }
      })
    }

// Use 
 After the table is rendered , call ,level Control the level of deployment ,0 Then everything unfolds ,status by true an 
recursionExpand(state.tableData, true, 0)

elementui Table custom totals , And put the and lines to the front

 add to  :summary-method="getSummaries" show-summary
<el-table ref="tableRef" :data="tableData" :summary-method="getSummaries" show-summary
      row-key="subCode"
      border
    >
</el-table>

//sums Each item of the returned array , Is the column corresponding to the total item 
const getSummaries = (param) => {
      const { columns, data } = param

      //columns Is the data of each column , There are field names 
      //data  Table data 

      console.log('columns', columns)
      console.log('data', data)
      const sums = []
      columns.forEach((column, index) => {
        let temparr = [0, 6, 7, 8, 9]
        if (temparr.includes(index)) {
          sums[index] = '-'
          return
        }
        const values = data.map((item) => Number(item[column.property]))
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          if (index === 5) {
            sums[index] += '%'
          }
        } else {
          sums[index] = 'N/A'
        }
      })

      return sums
    }

css Control the total at the top ：
/deep/ .el-table {
  display: flex;
  flex-direction: column;
}
//  order The default value is 0, Just put the table body order Set as 1 You can move to the last , In this way, the total line will move up to the top of the table body 
/deep/ .el-table__body-wrapper {
  order: 1;
}

el-input Input box add unit

<el-input v-model="item.pjcd" :disabled="isdisabled">
      <template #suffix>
            <span class="suffixtype"> element </span>
      </template>
 </el-input>