element快速搭建增删改查的模板

一、页面代码

<template>
  <div>
    <el-col>
      <el-row>
        <el-form :inline="true" v-show="isImportCollapse" class="query-form" ref="importForm">
          <el-form-item>
            <el-button type="default" @click="downloadMas()" size="small">下载模板</el-button>
          </el-form-item>
          <el-form-item prop="loginName">
            <el-button size="small" type="primary" @click="upload()">点击上传</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-button-group class="pull-right">
          <el-button
            type="default"
            size="small"
            icon="el-icon-upload2"
            title="导入"
            @click="isImportCollapse = !isImportCollapse"
          ></el-button>
          <el-button
            type="default"
            size="small"
            icon="el-icon-download"
            title="导出"
            @click="exportExcel()"
          ></el-button>
        </el-button-group>
      </el-row>
      <el-row>
        <el-button type="primary" size="small" icon="el-icon-plus" @click="add()">新建</el-button>
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          @click="del()"
          :disabled="dataListSelections.length <= 0"
          plain
        >删除</el-button>
      </el-row>

      <el-row>
        <div class="itemTrading">
          <el-table :data="dataList" border style="width: 100%" :pagination="pagination">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop label width="150"></el-table-column>
            <el-table-column prop label width="150"></el-table-column>
            <el-table-column prop label width="150"></el-table-column>
            <el-table-column prop label width="150"></el-table-column>
            <el-table-column prop label width="150"></el-table-column>
            <el-table-column prop label width="150"></el-table-column>
            <el-table-column prop label width="150"></el-table-column>

            <el-table-column
              header-align="center"
              align="center"
              fixed="right"
              width="300"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  icon="el-icon-view"
                  size="small"
                  @click="view(scope.row.id)"
                >查看</el-button>
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  size="small"
                  @click="edit(scope.row.id)"
                >修改</el-button>
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  size="small"
                  @click="del(scope.row.id)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageNo"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="total"
            background
            layout="total, sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </el-row>
    </el-col>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isSearchCollapse: false,
      isImportCollapse: false,
      dataList: [],
      dataListSelections: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      orderBy: "",
      pagination: {
        pageSize: 10, // 每页显示的行数
        total: 100 // 总行数
      }
    };
  },
  methods: {
    refreshList() {
      this.loading = true;
      this.$http({
        url: "",
        method: "get",
        params: {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          orderBy: this.orderBy
        }
      }).then(({ data }) => {
        if (data && data.success) {
          this.dataList = data.page.list;
          this.total = data.page.count;
          this.loading = false;
        }
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.refreshList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val;
      this.refreshList();
    },
    // 多选
    // 下载模板
    downloadMas() {
      this.$utils.download();
    },
    //导出
    exportExcel() {
      this.$utils.download();
    },
    //
    add(id) {},
    view(id) {},
    //修改
    edit(id) {},
    // 删除
    del(id) {
      let ids = id;
      this.$confirm(`确定删除所选项吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.loading = true;
        this.$http({
          url: "",
          method: "delete",
          params: { ids: ids }
        }).then(({ data }) => {
          if (data && data.success) {
            this.$message.success(data.msg);
          }
          this.loading = false;
        });
      });
    },
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    }
  }
};
</script>
<style scoped>
</style>

效果

二、表单

<template>
  <div>
    <el-dialog :title="title" :close-on-click-modal="false" append-to-body :visible.sync="visible">
      <el-form :model="inputForm">
        <el-row :gutter="15">
          <el-col :span="15">
            <el-form-item label="活动名称" :label-width="formLabelWidth">
              <el-input v-model="inputForm.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="visible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      loading: false,
      formLabelWidth: "120px",
      title: "",
      method: "",
      inputForm: {
        id: "",
        name: "",
        participant: "",
        status: "",
        segment: "",
        begin_date: "",
        end_date: "",
        banner: ""
      },
      options: [
        {
          value: "1",
          label: "待审核"
        },
        {
          value: "2",
          label: "审核通过"
        },
        {
          value: "3",
          label: "退回"
        }
      ]
    };
  },
  methods: {
    init(method, id) {
      this.method = method;
      this.inputForm.id = id;
      if (method === "add") {
        this.title = `新建`;
      } else if (method === "edit") {
        this.title = "修改";
      } else if (method === "view") {
        this.title = "查看";
      }
      this.loading = false;
      this.visible = true;
      console.log(this.visible);
      this.$nextTick(() => {
        if (method === "edit" || method === "view") {
          // 修改或者查看
          this.loading = true;
          this.$http({
            url: ``,
            method: "get"
          }).then(({ data }) => {});
        }
      });
    },
    // 表单提交
    doSubmit() {
      this.$refs["inputForm"].validate(valid => {
        if (valid) {
          this.loading = true;
          this.$http({
            url: ``,
            method: "post",
            data: this.inputForm
          }).then(({ data }) => {
            this.loading = false;
            if (data && data.success) {
              this.visible = false;
              this.$message.success(data.msg);
              //   this.$emit("penChange", data.pe);
            }
          });
        }
      });
    }
  }
};
</script>
<style >
</style>

效果