bgy开发小示例

一，不同分辨率修改对应数据

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

二、修改elementui的滚动条大小修改

在一个scss文件中：
::-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;
}

三、elementui表单验证不通过，滚动到不通过位置

if (valid) {
  console.log('验证通过', valid)
} else {
  console.log('验证不通过!!')
  const errorDiv = document.getElementsByClassName('is-error')
  errorDiv[0].scrollIntoView({//滚动到指定节点
      block: 'center', //值有start,center,end，nearest，当前显示在视图区域中间
      behavior: 'smooth', //值有auto、instant,smooth，缓动动画（当前是慢速的）
  })
  return false
}

四、递归实现多层级

五、elementui表格的表单验证

<el-form ref="dailogFormRef" :model="dailogForm" :rules="daiRules">
  <el-table :data="dailogForm.gridData">
    <el-table-column prop="quantity" label="工程量" width="200" align="center">
         <template #header>
            <span>工程量</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: '请填写工程量', trigger: 'blur' }],
        }
    }
}

树表格控制展开指定层级

    //递归修改
    function recursionExpand(data, status, level) {
      data.forEach((item) => {
        tableRef.value.toggleRowExpansion(item, status)
        if (item.children) {
          //开关所有
          if (level === 0) {
            recursionExpand(item.children, status, level)
          } else {
            //其他等级；比如开2级
            if (item.levelGroup < level) {
              recursionExpand(item.children, status, level)
            } else {
              //大于当前等级
              recursionExpand(item.children, !status, level)
            }
          }
        }
      })
    }

//使用
表格渲染完成后，调用，level控制展开的等级，0则是所有都展开，status为true展开
recursionExpand(state.tableData, true, 0)

elementui表格自定义合计，并把和几行放到最前面

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

//sums返回的数组的每一项，就是对应合计项的列
const getSummaries = (param) => {
      const { columns, data } = param

      //columns是每一列的数据，有字段名称
      //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控制合计放在最前面：
/deep/ .el-table {
  display: flex;
  flex-direction: column;
}
//  order默认值为0，只需将表体order置为1即可移到最后，这样合计行就上移到表体上方
/deep/ .el-table__body-wrapper {
  order: 1;
}

el-input输入框添加单位

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

elementui的弹窗显示或隐藏控制的变量

子组件：
弹窗使用 <el-dailog :visible.sync="visible">
props接收 shows
computed: {
    visible: {
      get() {
        return this.shows;
      },
      set(val) {
        this.$emit('update:shows', val); // visible 改变的时候通知父组件
      },
    },
},

父组件：
<dialogbox :show.sync="showDailog">