element-admin后台管理系统使用时遇到的问题及解决

element-admin后台管理系统

element-admin后台管理系统使用时遇到的问题及解决

1.文件上传

elementUI后台管理系统上传文件时不能直接用action属性，因为还需要有错误回调的提示信息，所以要用http-request来覆盖这一默认的上传行为：

1. 组件中加上http-request属性

<el-upload class="upload-demo" 
   action="" 
   :headers="{'Authorization': header}" 
   :on-preview="handlePreview" 
   :on-remove="handleRemove" 
   :before-remove="beforeRemove" 
   :show-file-list="false" multiple 
   :on-success="handleUploadSuccess" 
   :on-change="handleUploadError" 
   :http-request="uploadFile">
      <el-button type="primary" size="mini">导入数据</el-button>
</el-upload>

3. headers属性设置请求头，header值通过getToken方法获取token

this.header = 'Bearer ' + getToken()

5. 上传给后台的表格要以formData的格式

    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    uploadFile(param) {
      const _file = param.file
      if (_file.size > 1024 * 1024) {
        this.$message({
          message: '上传文件超过1M,导入失败',
          type: 'error'
        })
      }
      var formData = new FormData()
      formData.append('file', _file)

      uploadAgentAccountView(formData)
        .then((response) => {
          this.tableData = response.data
        })
        .catch((err) => {
          this.$message({
            message: err.msg,
            type: 'error'
          })
        })
    },

7. 文件上传后后台返回了表格数据内容作为预览显示，或者返回错误提示，这里并没有提交数据，页面上带有保存按钮从而提交表格数据内容

手动上传

	  <el-upload class="upload-demo" 
	  :limit="1" ref="upload" 
	  :http-request="uploadFile" 
	  action="" 
	  :on-preview="handlePreview" 
	  :on-remove="handleRemove" 
	  :file-list="fileList" 
	  :auto-upload="false">
        <span class="upload-title" slot="trigger">导入数据</span>
      </el-upload>

   uploadFile(param) {
      const _file = param.file

      if (_file.size > 1024 * 1024) {
        this.$message({
          message: '上传文件超过1M,导入失败',
          type: 'error'
        })
        return
      }
      var formData = new FormData()
      formData.append('file', _file)
      bindSelectedAccount(formData)
        .then((response) => {
          this.dialogFormBindSelectedVisible = false
          this.$message({
            message: '批量绑定成功',
            type: 'success'
          })
          this.getList()
        })
        .catch((err) => {
          console.log(err)
          // reject(false);
          this.$message({
            message: err.msg,
            type: 'error'
          })
        })
    }

4. 通过按钮手动触发上传操作

<el-button :disabled="isDisable" type="primary" @click="submitUpload">确定</el-button>

	submitUpload() {
      this.$refs.upload.submit()
    },

表格中空的字段用短横线表示

使用filters过滤器函数
过滤器函数可以使用在两个地方:

1.双大括号表达式 {{ 文本字符串 | 过滤函数 }}

2.v-bind:str= “文本字符串 | 过滤函数”

	<el-table-column label="功能类型" min-width="150px" align="center">
      <template slot-scope="{row}">
        <span>{{ row.cardType | cardFilter }}</span>
      </template>
    </el-table-column>
    
    export default {
    	data() {
    		return {
    		}
    	},
    	filters: {
    		cardFilter(cardType) {
      			const statusMap = {
        			1: '基础卡',
        			2: '视频卡',
        			null: '--'
     	 		}
     	 		return statusMap[cardType]
     	 	}
    	}
    }

表单验证时调用后台数据

1. 绑定验证规则 rules属性

<el-form ref="dataForm"
 :close-on-click-modal="false"
  :rules="rules"
  :model="temp"
   label-position="left"
   label-width="20%"
   style="width: 80%; margin-left:50px;">

var that
export default {
  data() {
    return {
	  {
         validator: (rule, value, callback) => {
            var temp = {
              imei: value,
              id: that.id
            }
            if (value) {
              checkImei(temp).then(response => {
                if (response.data) {
                  callback(new Error('该IMEI已存在'));
                } else {
                  callback()
                }
              })
            } else {
              callback()
            }
          },
          required: false,
          trigger: "blur",
        }
      ],
created() {
  that = this
}

注意that的作用域