封装一个Element-ui生成一个可行内编辑的表格(vue2项目)

这个封装的是一个供整个项目使用的表格,可多次复用.放在一个全局使用的公共组件文件下.

大致功能介绍,封装自定义指令,点击获得焦点,显示输入框,失去焦点显示文本内容,类型是字典决定类型,图片可以显示图片名还是上传图片

子组件

<script>
export default {
  props: {
    //生成表头
    fields: {
      type: Array,
      default: () => [],
    },
    //数据
    tableData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  created() {},
// 自定义指令
  directives: {
    focus: {
      inserted: function (el) {
        el.querySelector("input").focus();
      },
    },
  },
  methods: {
    // 点击框 获取焦点 column列,row 行
    cellClick(column, row) {
      column.iseditor = true;
      row.isnameSelected = true;
    },
    //输入框失去焦点触发,此处用提示框提示修改
    blurEvent(column, row) {
      //  console.log(column, row);
      column.iseditor = false;
      row.isnameSelected = false;
    },
   
  },
};
</script>
<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        :prop="field.prop"
        :label="field.label"
        :min-width="field.minWidth || 140"
        v-for="(field, index) in fields"
        :key="index"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div v-if="field.slot">
            <slot :name="field.slot" :row="scope.row" />
          </div>
          <div v-else>
            <div>
              <el-input
                v-if="field.iseditor && scope.row.isnameSelected"
                v-model="scope.row[field.prop]"
                @focus="cellClick(field, scope.row)"
                @blur="blurEvent(field, scope.row)"
                v-focus
              >
              </el-input>
              <p @click="cellClick(field, scope.row)" v-else>
                {{ scope.row[field.prop] || "--" }}
              </p>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style scoped>
</style>
<style>
.el-tooltip__popper {
  max-width: 1000px;
}
.disabled .el-upload--picture-card {
  display: none;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

父组件

这里还有封装了一个文件上传的组件嵌套在表格中,算是拓展

<script>
import editComponents from "../../components/editComponents";
export default {
  components: { editComponents },
  data() {
    return {
      fields: [
        {
          prop: "industryCode",
          label: "产品",
          iseditor: false,
        },
        {
          prop: "id",
          label: "id",
          iseditor: false,
        },
        {
          prop: "paragraphType",
          label: "产品类型",
          iseditor: false,
          slot: "paragraphType",
//根据这个slot来决定是否要使用插槽,让父组件可以更好地使用数据,不用传来传去,下面是一样的
        },
        {
          prop: "paragraphImage",
          label: "产品图片",
          slot: "paragraphImage",
          iseditor: false,
        },
        {
          prop: "action",
          label: "操作",
          slot: "action",
        },
      ],
      tableData: [
        {
          industryCode: "苹果",
          id: "15",
          paragraphType: "1",
          paragraphImage: "15.png",
        },
        {
          industryCode: "苹果",
          id: "16",
          paragraphType: "2",
          paragraphImage: "15.png",
        },
        {
          industryCode: "苹果",
          id: "17",
          paragraphType: "1",
          paragraphImage: "15.png",
        },
      ],
      fileList: [], //文件总数
      fileList1: [], //详情文件总数
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  computed: {
    //文件上传地址
    upLoadUrl() {
      //process.env.VUE_APP_BASE_API 检测当前环境来决定接口路径
      //测试环境 VUE_APP_BASE_API = '/stage-api'
      if (process.env.VUE_APP_BASE_API == "/stage-api") {
        return "接口地址"; //   例如:'/minio/upload'
        // 生产
      } else if (process.env.VUE_APP_BASE_API == "生产接口") {
        return "接口地址";
      } else {
        // 本地
        return "接口地址";
      }
    },
  },
  created() {
    this.getlist();
  },
  methods: {
    //获取数据
    getlist() {
      // 发请求获取数据写在这里
      this.tableData = this.tableData.map((item) => {
        return { ...item, isnameSelected: false };
      });
    },
    // 添加
    hAdd() {
      const productObj1 = {
        industryCode: "",
        id: "",
        paragraphType: "",
        paragraphImage: "",
        iseditor: false,
        uuId: Math.random(),
      };

      this.tableData.push(productObj1);
    },
    // 删除
    del(row) {
      this.tableData = this.tableData.filter(
        (item) => item.uuId !== row.uuId || item.id !== row.id
      );
    },
    //图片上传===========================
    handleRemove(file) {
      console.log(file);
      console.log(this.$refs.upload);
      let uploadFiles = this.$refs.upload.uploadFiles;
      for (var i = 0; i < uploadFiles.length; i++) {
        if (uploadFiles[i]["url"] == file.url) {
          uploadFiles.splice(i, 1);
        }
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    // 文件上传成功-----------------
    async handleSuccess(response, row) {
      // 处理上传成功后的逻辑
      console.log("上传成功", response, row);
      this.fileName = response.data.fileName;
      row.paragraphImage = response.data.fileName;
    },
    handleError(err, file, fileList) {
      // 处理上传失败后的逻辑
      console.error("上传失败", err);
    },
    //  selectedLabel(selectedValue) {
    //   if (selectedValue === "1") {
    //     return "选择一";
    //   } else if (selectedValue === "2") {
    //     return "选择二";
    //   }
    // },
    async onSubmit() {
      // 删除不需要的属性
      this.tableData.forEach(function (obj) {
        if (obj.hasOwnProperty("iseditor")) {
          delete obj.iseditor;
        }
        if (obj.hasOwnProperty("uuId")) {
          delete obj.uuId;
        }
        if (obj.hasOwnProperty("isnameSelected")) {
          delete obj.isnameSelected;
        }
      });
      // 新增
      if (!this.industryCode) {
        //   新增请求写在这里
        console.log(res);
        if (res.message == "success") {
          this.$message({
            message: res.data,
            type: "success",
            duration: 1000,
          });
        } else {
          this.$message.error(res.data);
        }
      } else {
        // 修改请求写在这里
        console.log(res);
        if (res.message == "success") {
          this.$message({
            message: res.data,
            type: "success",
            duration: 1000,
          });
          this.goBack();
        } else {
          this.$message.error(res.data);
        }
      }
    },
  },
};
</script>
<template>
  <div>
    <el-button @click="hAdd" type="primary">添加</el-button>
    <editComponents :fields="fields" :tableData="tableData">
      <template #action="{ row }">
        <el-button type="text" size="small" @click="del(row)">删除</el-button>
      </template>
      <template #paragraphImage="{ row }">
        <div>
          <p>{{ row.paragraphImage || "--" }}</p>
          <el-upload
            ref="upload"
            :file-list="fileList1"
            :action="upLoadUrl"
            list-type="picture-card"
            :on-success="(e) => handleSuccess(e, row)"
            :on-error="handleError"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>

                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </div>
      </template>
      <template #paragraphType="{ row }">
        <div>
          <el-select v-model="row.paragraphType" placeholder="请选择">
            <el-option label="选择一" value="1"></el-option>
            <el-option label="选择二" value="2"></el-option>
          </el-select>
          <!-- <p @click="cellClick(row)">
              {{ selectedLabel(row.titleTypeSecond) || "--" }}
              {{row}}
            </p> -->
        </div>
      </template>
    </editComponents>
    <el-card>
      <div>
        <el-button type="primary" round @click="onSubmit">提交</el-button>
      </div>
    </el-card>
  </div>
</template>
<style scoped>
</style>