element table表格支持添加编辑校验

最新推荐文章于 2023-11-01 14:35:31 发布

kurcp

最新推荐文章于 2023-11-01 14:35:31 发布

阅读量903

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_59570698/article/details/131451776

版权

实现效果：

将table表格与form表单结合使用（用el-form外层包裹el-table结合rules进行校验）

代码实现

<template>
  <div>
    <el-card class="box-card" shadow="never">
      <div>
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="AddData"
          >添加</el-button
        >
      </div>
    </el-card>
    <el-card class="box-card" shadow="never">
      <el-form ref="Issuerform" :model="Issuerform">
        <el-table :data="Issuerform.tableIssuerData" border>
          <el-table-column
            prop="Name"
            label="简称"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span v-if="!scope.row.editCell">{{ scope.row.Name }}</span>
              <el-form-item
                v-else
                :prop="'tableIssuerData.' + scope.$index + '.Name'"
                :rules="rules.Name"
              >
                <el-autocomplete
                  ref="autocomplete"
                  v-model="scope.row.Name"
                  class="querySearch"
                  style="width: 100%"
                  size="mini"
                  clearable
                  :fetch-suggestions="querySearchAsync"
                  placeholder="请输入搜索内容"
                  :trigger-on-focus="false"
                  @select="handleSelect"
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            prop="Code"
            label="代码"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span v-if="!scope.row.editCell">{{ scope.row.Code }}</span>
              <el-form-item
                v-else
                :prop="'tableIssuerData.' + scope.$index + '.Code'"
                :rules="rules.Code"
              >
                <el-input size="mini" v-model="scope.row.Code"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            prop="issuer"
            label="主体"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="Type"
            label="类型"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span v-if="!scope.row.editCell">
                {{ scope.row.Type }}
              </span>
              <el-form-item
                v-else
                :prop="'tableIssuerData.' + scope.$index + '.Type'"
                :rules="rules.Type"
              >
                <el-select
                  v-model="scope.row.Type"
                  placeholder="请选择"
                  clearable
                  size="mini"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in TypeOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="text"
                v-if="scope.row.editCell"
                @click="issuerSave(scope.row, scope.$index)"
              >
                保存
              </el-button>
              <el-button
                size="small"
                type="text"
                v-if="!scope.row.editCell"
                @click="issuerEdit(scope.row, scope.$index)"
              >
                编辑
              </el-button>
              <el-button
                size="small"
                type="text"
                @click="issuerdelete(scope.row, scope.$index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </el-card>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      Issuerform: {
        tableIssuerData: [
          {
            Name: null,
            Code: null,
            issuer: null,
            Type: null,
            editCell: true,
          },
        ],
      },
      TypeOptions: [
        {
          value: "1",
          name: "类型1",
        },
        {
          value: "2",
          name: "类型2",
        },
        {
          value: "3",
          name: "类型3",
        },
      ],
      rules: {
        Name: [{ required: true, message: "", trigger: "blur" }],
        Code: [{ required: true, message: "", trigger: "blur" }],
        Type: [{ required: true, message: "", trigger: "change" }],
      },
    };
  },
  methods: {
    AddData() {
      this.Issuerform.tableIssuerData.push({
        Name: null,
        Code: null,
        issuer: null,
        Type: null,
        editCell: true,
      });
    },
    //模糊搜索
    querySearchAsync(queryString, cb) {
      let param = {
        name: queryString,
      };
      console.log(param, cb);
    },
    handleSelect() {},
    issuerSave(row, index) {
      this.$refs.Issuerform.validate((valid) => {
        if (valid) {
          this.Issuerform.tableIssuerData[index].editCell = false;
        } else {
          return false;
        }
      });
    },
    issuerEdit(row, index) {
      this.Issuerform.tableIssuerData[index].editCell = true;
    },
    issuerdelete(row, index) {
      this.Issuerform.tableIssuerData.splice(index, 1);
    },
  },
};
</script>
<style scoped lang='less'>
/deep/.el-form-item__error {
  display: none; //隐藏校验提示
}
</style>