关于使用elementUI的总结

一、多选组渲染和选中

 <el-checkbox-group v-model="checkboxGroup1" size="medium">
                    <el-checkbox border size="medium"
                         v-for="item in headerList" :label="item.key"                 
                         :key="item.key" class="checkboxitem"
                    >
                        {{item.value}}
                    </el-checkbox>
</el-checkbox-group>

二、图片列表和大图预览

 <div class="demo-image__preview" v-if="srcList.length">
        <el-image 
          class="preview-imglist"
          v-for="(item,index) in srcList"
          :key="index"
          style="width: 150px; height: 150px"
          :src="item"
          fit="contain"
          :preview-src-list="srcList">
        </el-image>
</div>

三、分页组件

<el-pagination
        style="margin-top:20px;"
        background
        :page-size="pageSize"
        :total="totalCount"
        :current-page="currentPage"
        layout="total, prev, pager, next"
        @current-change="pageChange"
></el-pagination>



//js部分
// 分页
    pageChange(val) {
      this.currentPage = val;
      this.getList();
    },

四、文件流下载

1、

 this.$axios.post(this.$api.DOWNLOAD,params,{responseType: "blob"}).then(res => {
                this.downoladModel = false
                const blob = new Blob([res]);
                if ("download" in document.createElement("a")) {
                    // 非IE下载
                    const elink = document.createElement("a");
                    elink.download = "学员手册.docx";
                    elink.style.display = "none";
                    elink.href = URL.createObjectURL(blob);
                    document.body.appendChild(elink);
                    elink.click();
                    URL.revokeObjectURL(elink.href); // 释放URL 对象
                    document.body.removeChild(elink);
                } else {
                    // IE10+下载
                    navigator.msSaveBlob(blob, "学员手册.docx");
                }
}).catch(error => {
                console.log(error);
});

2、

 <a :href="$api.DOWNLOAD_TEMPLATE" download="学员导入表.xls">模版下载</a>

五、对与单元格中的多选处理成 只有id的用逗号分割的字符串

this.selectionArr.map(item=> {return item.id}).join(',')

六、删除时的询问弹窗

this.$confirm('确定删除此项吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        this.$axios.post(this.$api.DETAIL, { id: data }).then(res => {
          if (res.data.code == 1) {
              this.$message.success(res.data.message);
              this.getList();
          } else {
              this.$message.error(res.data.message);
            }
        });
}).catch(_ => {});

七、表格中有URL链接，内容过长并且点击可复制   注：cellClick方法要写在<el-table   @cell-click="cellClick"> 中

 <el-table-column         
          prop="_url"
          label="消息链接"
          align="center"
          type="_url"
        >
        <template slot-scope="scope">
          <el-tooltip class="item"  placement="top">
              <div slot="content">{{scope.row._url}}<br>
                    <span>点击进行复制</span></div>
              <div class="oneLine">{{scope.row._url}}</div>
          </el-tooltip>
        </template>
 </el-table-column>

cellClick(row, column, cell, event){//点击进行复制链接
      if(column.type=="_url"){
      var input = document.createElement("input");   // js创建一个input输入框
      input.value = row.H5_5G_url;  // 将需要复制的文本赋值到创建的input输入框中
      document.body.appendChild(input);    // 将输入框暂时创建到实例里面
      input.select();   // 选中输入框中的内容
      document.execCommand("Copy");   // 执行复制操作
      document.body.removeChild(input); //最后删除实例中临时创建的input输入框，完成复制操作
      this.$message({
        type: "success",
        message: "复制成功"
      });
      }
}

八、过滤英文引号并且改为中文引号

if (this.content.title.indexOf("'") != -1 || this.content.title.indexOf("\"") != -1) { 
        this.content.title = this.content.title.replace(/\'/g,"‘").replace(/"([^"]*)"/g ,"“$1”"); 
} 

九、tab切换

<el-tabs v-model="type"  @tab-click="handleClick">
        <el-tab-pane name="check">
          <el-badge
            slot="label"
            :value="typeCnt.check"
            class="item"
            :hidden="typeCnt.check==0"
            >
            <span>待审核</span>
          </el-badge>
        </el-tab-pane>
        <el-tab-pane name="checked">
            <el-badge
              slot="label"
              :value="typeCnt.checked"
              class="item"
              :hidden="typeCnt.checked==0"
            >
            <span>已审核</span>
          </el-badge>
        </el-tab-pane>
</el-tabs>


在data中设置
data(){
    return{
        type:'check',
        typeCnt: {
          check: 0,
          checked: 0,
        },
    }
}

//  切换tab
    handleClick(tab) {
      this.type = tab.name;
      this.condition.pageNo = 1
    }  

十、检索栏

<el-form>
          <el-form-item size="small" >
            <el-input v-model="searchContent.title" 
                placeholder="请输入检索标题" class="seach-input">
            </el-input>
            <el-date-picker
              v-model="searchContent.start_time"
              type="date"
              class="seach-date"
              value-format="yyyy-MM-dd"
              placeholder="开始日期"
              :picker-options="pickerOptionsStart">
            </el-date-picker>
            <el-date-picker
              v-model="searchContent.end_time"
              type="date"
              class="seach-date"
              value-format="yyyy-MM-dd"
              placeholder="结束日期"
              :picker-options="pickerOptionsEnd">
            </el-date-picker>
            <el-button type="primary" @click="getList">检索</el-button>
            <el-button type="primary" @click="clearFilter">清空</el-button>
          </el-form-item>
</el-form>

在data中设置  结束时间不能小于开始时间
      searchContent: {
        title: "",
        start_time: "",
        end_time: ""
      },
      pickerOptionsStart: {//对开始时间和结束时间选择的限制
        disabledDate: time => {
          let endDateVal = this.searchContent.end_time;
          if (endDateVal) {
              return time.getTime() > new Date(endDateVal).getTime();
          }
        }
      },
      pickerOptionsEnd: {
          disabledDate: time =>{
            let beginDateVal = this.searchContent.start_time;
            if (beginDateVal) {
              return (time.getTime() < new Date(beginDateVal).getTime());
            }
          },
      },

//清空检索
clearFilter() {
      this.searchContent = {
        title:'',
        start_time:'',
        end_time:'',
      };
      this.currentPage = 1,
      this.getList();
},