可编辑的el-table表格,结合input输入,upload文件上传的表格

Posted 2021-01-28 steamed-twisted-roll

最近整理了一下,table表格的编辑状态,把一般表格里需要输入的类型都放进来了,实现的功能如图

 

 

这里面的input输入框没什么好说的,绑定对应的值就可以,要注意的是组件上传的upload,这个表格是有多个upload上传组件的,upload组件的文件列表是根据fileList展示的,所在在处理方法的时候要注意fileList的处理

 

下面放代码

<template>
  <div>
    <p>shopInfo</p>
    <div class="company">
      <p><el-button type="primary" @click="addCompany">添加公司</el-button></p>
      <el-table
        ref="multipleTable"
        :data="tableData3"
        border
        style="width: 100%">
        <el-table-column
          label="序号"
          type="index"
          width="55">
        </el-table-column>
        <el-table-column
          label="公司名称"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" placeholder="请输入公司名称"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="注册时间"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.date"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column
          label="注册资金"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input @blur="InputNumber(scope.row, ‘amount‘)" v-model="scope.row.amount" placeholder="请输入注册资金"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="注册文件"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <el-upload
              class="upload-demo"
              :action="action"
              :data="uploadData"
              :on-preview="handlePreview"
              <!-- 在组件的回调函数里加一个索引的参数 -->
              :on-remove="function(file,fileList){return handleRemove(file,fileList,scope.$index)}"
              :on-success="function(res,file,fileList){return handleSuccess(res,file,fileList,scope.$index)}"
              multiple
              :limit="1"
              :file-list="fileList[scope.$index]">
              <el-button size="small" type="text" v-if="!scope.row.file">上传文件</el-button>
            </el-upload>
            <span class="delete" @click="deleteCompany(scope.$index)"><img src="/static/images/close.png" ></span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<style scoped>
  .company {
    padding: 30px;
    text-align: left;
  }
  .delete {
    position: absolute;
    top: 25px;
    right: 10px;
  }
  td .el-upload-list__item {
    margin-top: -25px;
  }
</style>
<script>
// import host from ‘rootPath/config/host‘ // host文件
// import apiPath from ‘rootPath/config/api.json‘ // api文件

export default {
  name: ‘shopInfo‘,

  data () {
    return {
      tableData3: [],
      selectedTable: [],
      fileList: [[]],
      // action: `${host.apiUrl}${apiPath.common.qiniuupload}`,
      action: ``,
      uploadData: {userId: 1304, pathName: ‘company‘}
    }
  },

  created () {
    this.setTable()
  },

  methods: {
    setTable () {
      this.tableData3 = [{
        name: ‘‘,
        date: ‘‘,
        amount: null,
        file: ‘‘
      }]
    },

    // 添加公司
    addCompany () {
      this.tableData3.push({
        name: ‘‘,
        date: ‘‘,
        amount: null,
        file: ‘‘
      })
      this.fileList.push([])
    },

    // 删除公司
    deleteCompany (i) {
      this.tableData3.splice(i, 1)
      // 删除的时候要把fileList清除,否则页面已上传的文件不会被清空
      this.fileList.splice(i, 1)
      console.log(this.fileList)
    },

    // 过滤输入的金额
    InputNumber (row, property) {
      row[property] = this.limitInputPointNumber(row[property])
    },

    // 限制只能输入数字(可以输入两位小数)
    limitInputPointNumber (val) {
      if (val === 0 || val === ‘0‘ || val === ‘‘) {
        return ‘‘
      } else {
        let value = null
        value = String(val).replace(/[^d.]/g, ‘‘) // 清除“数字”和“.”以外的字符
        value = value.replace(/.{2,}/g, ‘.‘) // 只保留第一个. 清除多余的
        value = value.replace(‘.‘, ‘$#$‘).replace(/./g, ‘‘).replace(‘$#$‘, ‘.‘)
        value = value.replace(/^(-)*(d+).(dd).*$/, ‘$1$2.$3‘) // 只能输入两个小数
        return value
      }
    },

    // 预览图片
    handlePreview (file) {

    },

    // 删除图片
    handleRemove (file, fileList, index) {
      this.tableData3[index].file = ‘‘
    },

    // 图片上传
    handleSuccess (res, file, fileList, index) {
      if (res.code) {
        this.tableData3[index].file = res.data.url
      }
      // 上传之后,把返回的fileList赋值给对应组件的fileList
      this.fileList[index] = fileList
    }
  }
}
</script>