Element组件遇到的问题

前言

该文章记录一些工作中遇到的element组件使用时遇到的问题，以及一些解决办法，慢慢将会添加更多问题集合，所有内容均从网上整理而来，加上自己的理解做一个整合，方便工作中使用。

1.使用el-dialog组件，内容组件的销毁

//el-dialog组件，正常情况下，关闭时其内部元素还存在。有时候需求是关闭时销毁，打开时重新生成。
//使用 参数：destroy-on-close - 关闭时销毁 Dialog 中的元素

<el-dialog :destroy-on-close="true"> </el-dialog>

2.遍历生成upload组件时，如何处理对应上传文件

<el-form-item v-for="(item, i) in userSignupdata.tableList" :key="i">
    <el-upload 
        :action="dns + '/api/common/upload'" 
        :show-file-list="false" 
        :headers="{ token: token }" 
        :on-success="(response, file)=> handleAvatarSuccessA(i, response, file)" 
        list-type="picture-card">
            <img v-if="playerInfo.table[i]" :src="playerInfo.table[i]" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
     </el-upload>
</el-form-item>

//普通情况 :on-success="imgApplySuccess" 
imgApplySuccess(response, file, fileList) {
  //自带三个参数 response(接口返回的内容) file(上传成功的文件) fileList(前者都包含)
  file.url = response.data.fullurl
  this.imgApplyList = fileList
},

//遍历生成的情况 :on-success="(response, file)=> handleAvatarSuccessA(i, response, file)" 
//就是返回一个带自定义参数的函数，有了i这个自定义参数，才能分清楚是哪个遍历生成的upload上传的文件
handleAvatarSuccessA(i, response, file) {
  file.url = response.data.fullurl
  this.playerInfo.table[i] = response.data.fullurl
  this.$forceUpdate()//强制更新视图
},

3.form表单验证失效（填写了内容，也说空值）

<el-form :model="playerInfo" :rules="rules" ref="checkForm">
  <el-form-item prop="no" label="编号" class="playerno">
    <el-input type="number" v-model="playerInfo.playerNo" autocomplete="off"></el-input>
  </el-form-item>
</el-form>

// 设置验证规则rules，但是不生效，有值也提示空值。
rules: {
    no: [{ required: true, message: '选手编号不能为空', trigger: 'blur' }]
},

// 方法：将 v-model="playerInfo.playerNo" 改为 "playerInfo.no"，其原因就是要与prop="no"的值相匹配。

4.el-table表格实现滚动到底部加载数据(vue3+ts)

//1.table组件设置ref 和 固定高度height
<el-table
    :data="tableData"
    :highlight-current-row="true"
    :show-overflow-tooltip="true"
    v-loading="loading"
    ref="tableContainer"
    :stripe="true"
    height="548px"
    style="width: 100%; flex: 1; margin: 0px 0 10px; background-color: pink"
>
</el-table>

// 定义变量 
const loading = ref(false)
const tableContainer = ref<any>(null)
···

//找到DOM节点，bodyWrapper挂载/卸载事件
onMounted(async () => {
  await getList(listParams)
  tableContainer.value &&
    tableContainer.value.$refs.bodyWrapper.addEventListener('mousewheel', handleScroll)
})
onUnmounted(() => {
  tableContainer.value &&
    tableContainer.value.$refs.bodyWrapper.removeEventListener('mousewheel', handleScroll)
})

//触底事件
async function handleScroll(e: any) {
  //滚动方向判定
  const directon = e.deltaY > 0 ? 'down' : 'up'
  if (directon === 'down') {
    const dom =
      tableContainer.value.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]
    const { clientHeight, scrollTop, scrollHeight } = dom
    //距离底部100px
    if (scrollHeight - (clientHeight + scrollTop) <= 100) {
      if (loading.value || current_page.value == last_page.value) return
      changePage(current_page.value + 1)
    }
  }
}