基于Vue.js的文件选择与多选对话框组件Dccfile的使用教程

<template>
  <el-dialog :visible.sync="isShow" width="800px" @close="handlerClose">
    <!-- 对话框标题 -->
    <div slot="title" class="dialog-title">
      <span>{{ title }}</span>
      <i class="s-icon" @click="fullscreen = !fullscreen"></i>
    </div>

    <!-- 主体内容 -->
    <el-container>
      <el-main>
        <!-- 搜索表单 -->
        <el-form :model="queryParams" ref="queryForm" :inline="true">
          <el-form-item :label="$t('task.fileNo')" prop="fileNo">
            <el-input v-model="queryParams.fileNo" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item :label="$t('task.fileName')" prop="fileName">
            <el-input v-model="queryParams.fileName" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">{{ $t("public.search") }}</el-button>
            <el-button @click="resetQuery">{{ $t("public.reset") }}</el-button>
          </el-form-item>
        </el-form>

        <!-- 已添加文件区域 -->
        <div class="data-wrap">
          <h5>已添加:</h5>
          <div class="data-content">
            <el-tag
              v-for="(item, index) in data"
              :key="index"
              closable
              @close="removeTag(item, index)"
            >
              {{ item.filename }}
            </el-tag>
            <span v-if="data.length == 0" class="holder-select">请选择</span>
          </div>
        </div>

        <!-- 文件表格 -->
        <el-table :data="tableData" @selection-change="selectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column :label="$t('public.serialNum')" type="index" align="center" />
          <el-table-column prop="filenumber" label="文件编号" align="center" />
          <el-table-column prop="filename" label="文件名称" align="center" />
          <el-table-column prop="uploadname" label="上传人" align="center" />
          <el-table-column prop="uploadtime" label="上传时间" />
        </el-table>

        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 50, 100]"
          layout="prev, pager, next, sizes"
          :total="total"
        />
      </el-main>

      <!-- 底部按钮 -->
      <el-footer>
        <el-button @click="cancel">{{ $t("public.close") }}</el-button>
        <el-button type="primary" @click="submitForm">{{ $t("btn.submit") }}</el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>

methods: {
  handleQuery() {
    this.queryParams.pageNum = 1;
    this.getList();
  },
  resetQuery() {
    this.resetForm("queryForm");
    this.handleQuery();
  }
}

methods: {
  selectionChange(selection) {
    this.data = selection;
  },
  removeTag(row, index) {
    this.data.splice(index, 1);
    this.$refs.table.toggleRowSelection(row, false);
  }
}

methods: {
  handleSizeChange(size) {
    this.queryParams.pageSize = size;
    this.getList();
  },
  handleCurrentChange(page) {
    this.queryParams.pageNum = page;
    this.getList();
  }
}

data() {
  return {
    fullscreen: false
  };
},
methods: {
  handlerClose() {
    this.$emit('update:visible', false);
    this.resetDialog();
  }
}

<template>
  <Dccfile v-model="visible" :title="title" />
</template>

<script>
import Dccfile from '@/Dccfile/index.vue';

export default {
  components: { Dccfile },
  data() {
    return {
      visible: false,
      title: '选择文件'
    };
  }
};
</script>