elementu 可编辑表格校验

问题

提示：elementu 可编辑表格校验

<template>
  <div>
    <el-form
      ref="tableFrom"
      :model="{ ...tableDatas }"
      :rules="tableFromRules"
      :show-message="false"
      class="tableForm"
    >
      <el-table
        v-loading="loading"
        ref="vTableRef"
        :data="tableDatas"
        :header-cell-style="{ color: 'black', background: '#f8f8ff' }"
        :row-class-name="tableRowClassName"
        :row-style="setRowStyle"
        size="small"
        border
        highlight-current-row
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="selectionChange"
      >
        <el-table-column
          v-if="isRadio && showChoiceBox"
          align="center"
          width="50"
          fixed="left"
        >
          <template slot-scope="scope">
            <el-radio
              :label="scope.row"
              v-model="selectedTableRow"
              @click.native.stop.prevent="getTableRow(scope.row)"
            >
              {{ &nbsp;}}
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column
          v-if="isCheckBox && showChoiceBox"
          type="selection"
          align="center"
          width="50"
          fixed="left"
        />
        <el-table-column
          v-if="isIndex"
          :index="isShowPages ? getIndex : null"
          type="index"
          align="center"
          label="序号"
          width="80"
          fixed="left"
        />
        <div v-for="(item, index) in keyList" :key="index">
          <el-table-column
            v-if="!item.type && !item.popover"
            :formatter="item.formatter"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="item.type"
            :key="index"
            :formatter="item.formatter"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            align="center"
          >
            <template slot-scope="scope">
              <el-form-item
                :prop="scope.$index + '.' + item.prop"
                :rules="tableFromRules[item.prop]"
              >
                <el-input
                  v-if="item.type === 'input'"
                  v-model="scope.row[item.prop]"
                  :class="item.class"
                  :disabled="item.disabled"
                  :maxlength="item.maxlength"
                  clearable
                  size="mini"
                  @blur="val => {item.func ? item.func(val, scope.row) : handleBlur(val, scope.row)}"
                />
                <el-select
                  v-if="item.type === 'select'"
                  v-model="scope.row[item.prop]"
                  filterable
                  size="mini"
                  @change="val => {item.func ? item.func(val, scope.row) : null}"
                >
                  <el-option
                    v-for="(item1, index) in item.option"
                    :key="index"
                    :label="item1.value + '-' + item1.label"
                    :value="item1.value"
                  />
                </el-select>
                <el-date-picker
                  v-date-format
                  v-if="item.type === 'date'"
                  v-model="scope.row[item.prop]"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  @change="val => {item.func ? item.func(val, scope.row) : handleChange(val, scope.row)}"
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            v-if="item.popover"
            :formatter="item.formatter"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            align="center"
          >
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>{{ scope.row[item.popover] }}</p>
                <div slot="reference">
                  {{ scope.row[item.prop] }}
                </div>
              </el-popover>
            </template>
          </el-table-column>
        </div>
        <el-table-column
          v-if="tableTrue"
          width="125"
          align="center"
        >
          <template slot-scope="scope">
            <el-popover
              :ref="`popover-${scope.$index}`"
              v-model="scope.row.visible"
              placement="top"
              width="180"
            >
              <p>确定删除本条数据吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button
                  size="mini"
                  type="text"
                  @click="$refs[`popover-${scope.$index}`].doClose()"
                >取消</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  @click="subDelete(scope.$index)"
                >确定</el-button
                >
              </div>
              <el-button
                slot="reference"
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="scope.row.visible = true"
              />
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <el-button
        v-if="isShowhandAdd"
        class="addrow"
        type="text"
        size="mini"
        @click="handAdd"
      >
        + 添加</el-button
        >
    </el-form>
    <div class="laypage_container">
      <div class="slot_con">
        <slot />
      </div>
      <el-pagination
        v-if="isShowPages"
        :current-page="pageObj.page"
        :page-size="pageObj.pageSize"
        :total="pageObj.total"
        :page-sizes="pageObj.sizes || [5, 10, 20, 30, 50, 100]"
        class="laypage_con"
        layout="total, prev, pager, next, sizes"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 表格校验
    tableFromRules: {
      type: Object,
      default: function() {
        return []
      }
    },
    // 表格字段列表
    keyList: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 表格数据列表
    dataList: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    // 选择列（单/多选）是否展示
    showChoiceBox: {
      type: Boolean,
      default: true
    },
    // 单选列
    isRadio: {
      type: Boolean,
      default: false
    },
    // 多选列
    isCheckBox: {
      type: Boolean,
      default: false
    },
    // 序号
    isIndex: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    // 是否显示分页
    isShowPages: {
      type: Boolean,
      default: true
    },
    // 分页对象
    pageObj: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 是否可编辑
    isCompile: {
      type: Boolean,
      default: false
    },
    // 设置表格行样式
    setRowStyle: {
      type: Function,
      default: () => {}
    },
    // 是否需要操作列
    tableTrue: {
      type: Boolean,
      default: false
    },
    // 是否需要添加行
    isShowhandAdd: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectedTableRow: {} // 单选数据
    }
  },
  computed: {
    tableDatas() {
      if (this.dataList.every((item) => typeof (item) === 'object')) {
        return this.dataList
      } else {
        return []
      }
    }
  },
  methods: {
    // 单选行
    getTableRow(rowObj) {
      this.selectedTableRow = rowObj
      this.$emit('getTableRow', rowObj)
    },
    // 多选行
    selectionChange(valArr) {
      this.$emit('selectionChange', valArr)
      this.$emit('getTableRow', valArr)
    },
    subDelete(index) {
      // 新增页面的删除
      this.tableDatas.splice(index, 1)
    },
    // 表格序号
    getIndex(index) {
      return index + 1 + (this.pageObj.page - 1) * this.pageObj.pageSize
    },
    // 每页多少条改变
    handleSizeChange(size) {
      // console.log(size, 'size')
      this.pageObj.page = 1
      this.pageObj.pageSize = size
      this.$emit('laypageChange')
    },
    // 当前页改变
    handlePageChange(page) {
      // console.log(page, 'page')
      this.pageObj.page = page
      this.$emit('laypageChange')
    },
    // 单选行选中方法
    setCurrentRow(row) {
      this.selectedTableRow = row
      this.$refs.vTableRef.setCurrentRow(row)
    },
    // 行数据中添加索引
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex
    },
    // 添加行
    handAdd() {
      this.tableDatas.push({})
    },
    handleBlur(val, row) {
      this.$emit('handleBlur', val, row)
    },
    handleChange(val, row) {
      this.$emit('handleChange', val, row)
    },
    checkTable(callback) {
      this.$refs.tableFrom.validate((valid, object) => {
        if (valid && callback) {
          callback()
          // console.log('回调完毕')
        } else {
          for (var key in object) {
            console.log(object, 'object')
            if (object.hasOwnProperty(Object.keys(object)[0])) {
              this.$pop(
                object[Object.keys(object)[0]][0].message,
                'warning',
                this
              )
            }
          }
        }
      })
    }
  }
}
</script>
<style scoped>
.laypage_container {
  display: block;
  overflow: hidden;
  padding: 10px 0 5px;
}
.slot_con {
  float: right;
}
.laypage_con {
  float: left;
}
.addrow {
  text-align: center;
  width: 100%;
  border: 1px dashed #dfe6ec
}
/deep/.el-pagination {
  font-size: 14px;
}
/deep/.el-pagination span {
  font-size: 14px;
}
/deep/.el-pagination button:disabled {
  color: #c0c4cc;
  background-color: #f8f9fd;
  cursor: not-allowed;
}
/deep/ .el-form-item__content {
  height: 30px !important;
  line-height:30px !important;
  padding: 0 !important;
}
/deep/ .el-form-item {
  margin-bottom: 0 !important;
}
/*表单校验提示（placeholder）样式 */
/deep/.el-form-item__error {
  background-color: transparent !important;
  line-height: 1em !important;
  font-size: 10px !important;
  position: absolute;
  left: 10px;
}
</style>