el-table 复选框，el-select多选， 图片上传

1、el-table 复选框实现删除（包含批量删除）

<template>
  <div class="app-container">
    <div>
      <el-card class="box-card" style="margin-bottom: 20px">
        <el-form ref="searchForm" :model="sreachInfo" label-position="right" label-width="20px" style="width: 100%; margin-left:0px; height: 30px">
          <el-row>

            <el-form-item label="">
              <el-input v-model="sreachInfo.aa" style="width: 300px" placeholder="aa" />
              <el-input v-model="sreachInfo.bb" style="width: 300px" placeholder="BB" />
              <el-button type="primary" icon="el-icon-search" @click="getList">
                搜索
              </el-button>


              <div style="float: right">
                <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-circle-plus-outline" @click.native="deleteShopBrands">
                  删除
                </el-button>
              </div>



            </el-form-item>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <!--数据列表-->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="载入中"
      border
      fit
      stripe
      highlight-current-row
      :height="tableHeight"
      :row-key="(row)=>{ return row.id}"
      @selection-change="handleSelectionChange"
      @select-all="selectAll"
      ref="multipleTable"
      class="order"
      :key="tableKey"
    >
      <el-table-column :reserve-selection="true"
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column label="id" width="120px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="state" width="180px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.state }}</span>
        </template>
      </el-table-column>


      <el-table-column label="创建时间" width="180px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" width="180px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.updateTime }}</span>
        </template>
      </el-table-column>

    </el-table>

    <Pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

  </div>
</template>
<script type="javascript">
  import { formatDate } from '@/utils/date.js'
  import Pagination from '@/components/Pagination'
  import vueJsonEditor from 'vue-json-editor'
  import md5 from 'js-md5';
  const axios = require('axios');
  export default {
    name: 'BrandManagerList',
    filters: {
      formatDate(time) {
        if (time != null && time != '') {
          var date = new Date(Date.parse(time.replace(/-/g, '/')))
          return formatDate(date, 'yyyy-MM-dd')
        } else {
          return ''
        }
      }
    },
    total: 0,
    components: {
      Pagination,
      vueJsonEditor
    },
    data() {
      return {
        /*table刷新*/
        tableKey:"",
        list: [],
        listLoading: true,
        total: 0,
        listQuery: {
          page: 1,
          limit: 50
        },
        sreachInfo:{
          aa:"",
          bb:"",
        },
        delInfo:{
          ids:""
        },
        info: {
        },
        dialogFormVisible: false,
        dialogStatus: '',
        textMap: {
          editConfig: '编辑数据',
          addConfig: '添加数据'
        },
        screenHeight: document.body.clientHeight,
        tableHeight: window.innerHeight - 300,
        rules: {
        },
      }
    },
    watch: {
      sreachInfo: {
        handler() {
          this.listQuery.page = 1
        },
        immediate: true,
        deep: true
      }
    },
    created() {
      this.getUserInfo()
      this.getList()
    },
    mounted: function() {
      console.log(this.list)
      this.listLoading = true
      window.onresize = () => {
        this.screenHeight = document.body.clientHeight
        this.tableHeight = this.screenHeight - 300
      }
    },
    methods: {
      /*禁用全选*/
      selectAll () {
        this.$refs.multipleTable.clearSelection()
      },

      /*默认选中*/
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      /*选中*/
      handleSelectionChange(val) {
/*        var theArray=[];
        for (var i=0;i<val.length;i++){
         theArray.push(val[i].id)
        }
        this.delInfo.ids= JSON.stringify(theArray)
        console.log("val",this.delInfo)*/

      },
      getList() {
        var url = this.HOST + "/xxx/xxxList?page="+this.listQuery.page+"&rows="+this.listQuery.limit
        var qs = require('qs')
        var instance = this.$axios.create({
          headers: { 'content-type': 'application/x-www-form-urlencoded' }
        })
        instance.post(url, qs.stringify(this.sreachInfo))
          .then((response) => {
            const res = response.data
            if (res.needReLogin === 1) {
              this.$store.dispatch('LogOut').then(() => {
                location.reload()
              })
            }
            this.listLoading = false
            this.typeList = res.typeList
            this.list = res.rows
            this.total = res.total

            this.shopUploadInfo.sign=res.sign
            this.shopUploadInfo.uploadUrl=res.uploadUrl
            this.shopUploadInfo.allowFileTypes=res.allowFileTypes
          })
      },
      deleteShopBrands() {
        var theArray=[];
        for (var i=0;i<this.$refs.multipleTable.selection.length;i++){
          theArray.push(this.$refs.multipleTable.selection[i].id)
        }
        this.delInfo.ids= JSON.stringify(theArray) 

        this.$confirm('确定要删除id:'+this.delInfo.ids.toString()+'吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var url = this.HOST + '/xxx/xxxDelete'
          var qs = require('qs')
          var instance = this.$axios.create({
            headers: { 'content-type': 'application/x-www-form-urlencoded' }
          })
          instance.post(url, qs.stringify(this.delInfo))
            .then((response) => {
              const res = response.data
              this.dialogFormVisible = false
              if (res.state == true) {
                this.$notify({
                  title: '成功',
                  message: res.msg,
                  type: 'success',
                  duration: 2000
                })
              } else {
                this.$notify.error({
                  title: '失败',
                  message: res.msg,
                  duration: 2000
                })
              }
              this.tableKey=Math.random()
              this.getList()
            })


        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })


      },


    }
  }

</script>
<style scoped>  /* 去除全选框*/
  /deep/.order .el-table__header-wrapper  .el-checkbox{
    display:none
  }
</style>

2、el-select 多选 数据回显

          <!--<el-input v-model="itemInfo.cid" style="width: 300px" />-->
          <el-select style="width: 60%" v-model="itemInfo.selectedItem" @change="$forceUpdate()" multiple placeholder="请选择">
          <el-option
            v-for="item in typeList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
          </el-select>

解释：
itemInfo.cid:[] 数组
@change="$forceUpdate()"   非常重要，不然点不动选项

3、图片上传

          <span style="float: left" ><div class="images" v-viewer><img :src="itemInfo.image" style="width: 148px;height: 148px"></div></span>
           <div style="float: left;margin-left: 10px">
             <el-upload
               action="/"
               list-type="picture-card"
               accept="image/jpeg,image/png,image/jpg"
               :http-request="uploadFile"
               :limit="1"
               :on-preview="handlePictureCardPreview"
               :on-remove="handleRemove">
               <i class="el-icon-plus"></i>
             </el-upload>
             <el-dialog :visible.sync="dialogVisible">
               <img width="100%" :src="dialogImageUrl" alt="">
             </el-dialog>
           </div>

data:
 /*图片上传*/
        dialogImageUrl: '',
        dialogVisible: false,
js:
handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      // 文件上传
      uploadFile(params) {
        console.log("uploadFile", params);

        const _file = params.file;
        const isLt2M = _file.size / 1024 / 1024 < 2;

        // 通过 FormData 对象上传文件
        var formData = new FormData();
        formData.append("file",_file)
        formData.append("aa",aa)
    

        if (!isLt2M) {
          this.$message.error("请上传2M以下的图片");
          return false;
        }
        //formdata本身是个对象，参数名为file
        axios({
          method: 'post',
          url: /upload/xxx,
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          data:formData,  //formdata本身是个对象，参数名为file
        }).then(res => {
          if (res.data.status==0){
            this.$notify({
              title: '成功',
              message: "上传成功",
              type: 'success',
              duration: 2000
            })
         
          }else {
            this.$notify.error({
              title: '失败',
              message: "上传失败",
              duration: 2000
            })
          }
        });
      }

4、动态表单

  <el-form-item label="扩展属性:">
        </el-form-item>
        <el-row style="margin-left: 100px">

          <el-form :model="dynamicOption" ref="dynamicInput">
            <el-col :span="1" v-if="dynamicOption.items.length==0" >
              <el-button @click="addEnvironmentForm()" size="mini" class="el-icon-plus"></el-button>
            </el-col>
            <el-row :gutter="12" v-for="(item, index) in dynamicOption.items" :key="index">
              <el-col :span="5">
                <el-form-item :prop="'items.' + index + '.text'" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
                  <el-input style="width: 300px" v-model="item.text"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="1">
                <i @click="removeForm(item)" style="font-size:28px;cursor:pointer;" class="el-icon-delete"></i>
              </el-col>
              <el-col :span="1" >
                <el-button @click="addForm()" size="mini" class="el-icon-plus"></el-button>
              </el-col>
            </el-row>
          </el-form>
data:
        /*扩展属性*/
        dynamicOption:{
          items: []
        },
js:
      //移除表单项事件
      removeForm(item) {
        var index = this.dynamicOption.items.indexOf(item)
        if (index !== -1) {
          this.dynamicOption.items.splice(index, 1)
        }
      },
      //添加表单项事件
      addForm() {
        this.dynamicOption.items.push({
          text: "",
        });
      }

5、防止重复提交

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