Vue3+ElementUI中的Table组件的使用

校验

表格内多个输入框校验

1. 注意prop如何写。
2. 实现：一旦输入框内部有更改，清空校验；
3. 实现：自定义校验错误提示信息样式；
4. 实现：在校验中获取该行数据；

<template>
          <el-table :data="inputTableData" max-height="286">
            <el-table-column type="index" label="#" align="center" width="80" />
            <el-table-column prop="name" label="产品名称" align="center" width="180">
              <template #default="scope">
                <el-form-item :prop="`${scope.$index}.name`" :rules="inputTableRules(scope.row).name">
                  <el-input type="text" v-model="scope.row.name" @input="clearValidateStatus(scope.$index, 0)"></el-input>
                  <template v-slot:error="{ error }">
                    <el-tooltip effect="light" :content="error" placement="top">
                      <el-icon class="custom-error-tip"><WarningFilled /></el-icon>
                    </el-tooltip>
                  </template>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="price" align="center">
              <template #default="scope">
                <el-form-item :prop="`${scope.$index}.price`" :rules="inputTableRules(scope.row).price">
                  <el-input type="text" v-model="scope.row.L" @input="clearValidateStatus(scope.$index, 1)"></el-input>
                  <template v-slot:error="{ error }">
                      <el-tooltip effect="light" :content="error" placement="top">
                        <el-icon class="custom-error-tip"><WarningFilled /></el-icon>
                      </el-tooltip>
                    </template>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
</template>

<script lang="ts" setup>
const inputTableRules = (row) => {
  return {
    name: [{ validator: validateInputTableName, rowData: row, trigger: [] }],
    L: [{ validator: validateNumber, rowData: row, trigger: [] }],
    A: [{ validator: validateNumber, rowData: row, trigger: [] }],
    B: [{ validator: validateNumber, rowData: row, trigger: [] }]
  }
}

const clearValidateStatus = (rowIndex, columnIndex) => {
  let columnLength = 4;
  let itemIndex = rowIndex * columnLength + columnIndex
  inputTableRuleFormRef.value.fields[itemIndex].clearValidate();
}
</script>

表格滚动到底部

// 表格滚动到底部
export const tableScrollToBottom = (tableRef) => {
  if (tableRef) {
    let maxHeight = tableRef.layout.table.refs.bodyWrapper.firstElementChild.firstElementChild.firstElementChild.clientHeight;
    tableRef.setScrollTop(maxHeight);
  }
}