案例:

<template>
  <div>
    <el-drawer
      title="附件信息"
      v-model="drawer"
      direction="rtl"
      :before-close="handleClose"
      size="35%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >

      <div>
        <!-- 按钮 -->
        <!-- 上传文件 -->
        <el-card>
          <!--  :file-list="files" 文件 -->
          <el-upload
            drag
            class="upload-demo"
            ref="upload"
            action="#"
            :on-change="ChangeImage"
            :file-list="files"
            :auto-upload="false"
            :show-file-list="true"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-card>
        <el-button
          style="margin-left: 10px;"
          type="success"
          @click="UpdateFilesData"
        >上传到服务器</el-button>
        <el-button
          class="cummon_buttonStyle"
          type="primary"
          icon="edit"
          @click="delData"
        >删除附件</el-button>
        <el-button
          class="cummon_buttonStyle"
          type="primary"
          icon="delete"
          @click="DownLoadFile"
        >下载附件</el-button>
        <cummonTable
          v-loading="loading"
          :columns="columns"
          :pagination="pagination"
          @rowClick="rowClick"
          @rowDoubleClick="rowDoubleClick"
          @handleSelectionChange="GethandleSelectionChange"
          @getPage="GetPage"
          ref="cummonTableByZiInfo"
        />
      </div>

    </el-drawer>
  </div>
</template>

<script>
import cummonTable from "@/components/zaojia/tableCommon/cummonTable.vue";
export default {
  //组件名称
  name: "",
  //import引入的组件需要注入到对象中才能使用
  components: {
    cummonTable,
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  data() {
    return {
      drawer: false,
      // 传给子组件
      columns: {
        getHeight: 565, //565
        isSelect: false,
        showFenYe: false, // 是否分页
        isSelection: false, //是否显示多选
        isTag: false,
        defaultall: false,
        highlightCurrent: true,
      },
      pagination: {
        total: null,
      },
      //#region 页码
      page: {
        pageNum: 1, //当前页
        pageSize: 10, //当前页的条数
      },
      //#endregion
      // 查询条件
      QueryJson: {},
      QueryJson1: "",
      //双击的ID
      Eid: "",
      // 折叠面板
      activeNames: ["1"], // 默认展开第一
      // form表单数据
      formInline: {},
      optionsUser: [], //操作人
      btnData: null, //调按钮接口传的参数
      //行点击的rowID
      rowID: null,
      row: null,
      files: [],
      formData: null, //附件上传FormData
    };
  },
  //方法集合
  methods: {
    //文件上传通用
    FilesUpdate() {
      let _this = this;
      this.formData.append("DataID", this.Eid); //属于哪条主表数据
      this.formData.append("MenuID", localStorage.getItem("MenuID")); //属于哪个菜单下
      _this.$EquiApi.UploadFile(this.formData).then((res) => {
        if (res.data.code == 200) {
          this.Refresh(res);
        }
      });
    },
    //添加图片
    ChangeImage(file, filelist) {
      this.files = filelist;
    },
    //附件上传
    UpdateFilesData() {
      this.formData = new FormData();
      this.files.forEach((item) => {
        if (!(!item.raw && item.url.indexOf("blob") === -1)) {
          this.formData.append("files", item.raw);
        }
      });
      this.formData.append("FileType", 1); //属于第几个附件上传控件
      this.FilesUpdate();
    },
    // 渲染表头信息
    GetColDataList() {
      let res2 = [
        {
          label: "文件原名称",
          prop: "FileName",
        },
        {
          label: "文件路径",
          prop: "FilePath",
        },
        {
          label: "文件新名称",
          prop: "NewFileName",
          direction: "center",
        },
        {
          label: "上传人",
          prop: "CreateUserName",
          direction: "center",
        },
        {
          label: "上传时间",
          prop: "CreateTime",
          direction: "center",
        },
      ];
      this.$refs.cummonTableByZiInfo.SetDataTableHeader(res2);
    },

    //点击下载附件按钮
    DownLoadFile() {
      if (this.row) {
        //调接口
        let _this = this;
        //调接口
        let param = {
          FileID: this.row.ID.toString(),
        };
        _this.$EquiApi.DownLoadFile(param).then((res) => {
          if (res.data.code == 200) {
            window.open("http://" + res.data.data.URL, "_blank");
            //刷新
            this.Refresh(res);
          }
        });
      } else {
        this.$message({
          showClose: true,
          message: "您没有选中任何数据项，请选择后在操作",
          type: "warning",
        });
      }
    },
    //点击删除按钮
    delData() {
      if (this.row) {
        // let IDs = []
        // this.multipleSelection.forEach(element => {
        //   IDs.push(element.ID)
        // });

        //调接口
        let _this = this;
        //调接口
        let param = {
          FileID: this.row.ID.toString(),
        };
        _this.$EquiApi.DelFile(param).then((res) => {
          if (res.data.code == 200) {
            //刷新
            this.Refresh(res);
          }
        });
      } else {
        this.$message({
          showClose: true,
          message: "您没有选中任何数据项，请选择后在操作",
          type: "warning",
        });
      }
    },

    //行点击
    rowClick(val) {
      this.rowID = val.ID;
      this.row = val;
    },
    //行双击
    rowDoubleClick() {},

    /**
     * GethandleSelectionChange:获取子组件（table）传过来勾选的数组
     * value:值
     */
    GethandleSelectionChange(value) {
      this.multipleSelection = value;
    },

    //获取参数数据
    GetPage(val) {
      this.page.pageNum = val.data.pageNum;
      this.page.pageSize = val.data.pageSize;
      let JsonParam = {
        DataID: this.Eid,
        MenuID: localStorage.getItem("MenuID"),
      };
      this.QueryJson1 = JSON.stringify(JsonParam);
      let param = {
        Page: this.page.pageNum, //页码
        Rows: this.page.pageSize, //条数
        QueryJson: this.QueryJson1, //查询条件
      };
      this.init(param);
      this.getBtn();
    },

    //获取按钮并展示
    getBtn() {
      const param = {
        MenuID:
          localStorage.getItem("MenuIds") == "undefined"
            ? 0
            : localStorage.getItem("MenuIds"),
        RoleID:
          localStorage.getItem("RoleID") == "undefined"
            ? 0
            : localStorage.getItem("RoleID"),
      };
      this.$GetButtonByRoleAndMenus(param, this);
    },

    /**
     * @init：初始化数据
     */
    init(param) {
      let _this = this;
      _this.GetColDataList(); //1.初始化表头

      _this.$EquiApi.GetFile(param).then((res) => {
        if (res.data.code == 200) {
          this.loading = false;
          _this.pagination.total = res.data.data.total;

          let tempTabledata = JSON.parse(res.data.data.rows);
          _this.tabledata = tempTabledata.map(function (i, index, arr) {
            if (i.CreateTime != null) {
              let temp = i.CreateTime.split(" "); //分隔
              i.CreateTime = temp[0];
            }
            if (i.ModifyTime != null) {
              let temp2 = i.ModifyTime.split(" "); //分隔
              i.ModifyTime = temp2[0];
            }
            if (i.InstallationDate != null) {
              let temp3 = i.InstallationDate.split(" "); //分隔
              i.InstallationDate = temp3[0];
            }
            return i;
          });
          _this.$refs.cummonTableByZiInfo
            ? (_this.$refs.cummonTableByZiInfo.loading = false)
            : "";
          _this.$refs.cummonTableByZiInfo.SettableData(_this.tabledata);
        }
      });
    },

    //刷新
    Refresh(res) {
      this.$message({
        showClose: true,
        message: res.data.msg,
        type: "success",
      });

      this.RefreshData(res);
    },
    //提供给外部进行刷新
    RefreshData() {
      let JsonParam = {
        DataID: this.Eid,
        MenuID: localStorage.getItem("MenuID"),
      };
      this.QueryJson1 = JSON.stringify(JsonParam);

      this.files = [];
      this.formData = [];

      let params = {
        Page: this.page.pageNum,
        Rows: this.page.pageSize, //条数
        QueryJson: this.QueryJson1, //查询条件
        Eid: this.Eid, //父级关联
      };
      this.init(params);
    },
  },
  //监听属性 类似于data概念
  computed: {},

  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped>
.subjectManageIndex ::v-deep .el-card__header {
  padding: 0.5rem;
}
</style>
<style lang="scss" scoped>
@import "@/assets/css/Drawer.css";
.Query span {
  margin-left: 20px;
}

.subjectManageIndex {
  .box-card {
    width: 100%;
  }

  .lineStyle {
    width: 3px;
    height: 19px;
    background: #239ee6;
    float: left;
    margin-right: 0.5%;
  }
}

::v-deep.el-drawer__wrapper {
  z-index: -3000 !important;
}

::v-deep.el-drawer {
  position: relative;
  left: 1100px;
  top: 154px;
  padding: 0;
  width: 28.125vw !important;
  height: 28.385vw;
  background: rgba(7, 18, 26, 0.8);
  font-size: 16px;
}

::v-deep.el-drawer__header {
  padding: 0 !important;
  width: 520px !important;
  height: 30px;
  margin: 12px;
  font-size: 16px;
  color: #ffffff;
  background: rgba(19, 32, 42, 0.5) !important;
}

::v-deep.el-drawer__body {
  margin: 0px 10px 10px 10px;
  background: rgba(19, 32, 42, 0.5) !important;
  padding: 0;
  width: 520px !important;
  height: 340px;
  position: relative;
}

.cummon_buttonStyle {
  /* background: linear-gradient(#0165eb, #018ff2, #00b7f9); */
  background: #5d6c8c;
  border: none;
  color: #f3f3f3;
}
</style>