vue项目技术点

element ui

一 行内编辑

 <el-table-column prop="slot" label="排序">
          <template slot-scope="scope">
            <el-input
              v-if="scope.row.slotEdit"  //没有这个数据 所以值是undefined
              v-model="scope.row.slot"	// 绑定自己数据
              placeholder="请输入"
            ></el-input>
            <div v-else @click="handleEdit(scope.$index, scope.row)">
              {
   {
    scope.row.slot }}
            </div>
            // scope.$index 是那个角标
          </template>
        </el-table-column>
        methods:{
   
			handleEdit(data, data2) {
   
      		this.$set(data2, 'slotEdit', true)
    		},
    	}

二 elementUI里面的dataPick 设置当前日期之前的时间禁止选择

<el-date-picker
        v-model="startTime"
        type="date"
        placeholder="开始日期"
        :picker-options="expireTimeOption"
      >

export default {
   
  data() {
   
    return {
   
      expireTimeOption: {
   
        disabledDate(date) {
   
          // 当天可选：date.getTime() < Date.now() - 24 * 60 * 60 * 1000
          return date.getTime() < Date.now();
        },
      },
    };
  },
  }

三 vue excel 导出

var formData = {
    id: data.id };      	//修改
      this.axios({
   
        url: "url",								//修改
        method: "post",
        data: formData,
        responseType: "blob",
      }).then((res) => {
   
        const blob = new Blob([res], {
   
          type: "application/vnd.ms-excel;charset=utf-8",
        });
        // const fileName = `${this.form.exportName}.xlsx`;
        const fileName = "";
        if ("msSaveOrOpenBlob" in navigator) {
   
          window.navigator.msSaveOrOpenBlob(blob, fileName);
          return;
        }
        const eleLink = document.createElement("a");
        eleLink.download = fileName;
        eleLink.style.display = "none";
        eleLink.href = URL.createObjectURL(blob);
        document.body.appendChild(eleLink);
        eleLink.click();
        document.body.removeChild(eleLink);
      });

四 通过地址下载文件

Vue实现媒体文件下载

handleVideoPlay(row) {
      //  row 内传入 地址
     var name = 'download'
     var url = row
     // 跳过浏览直接下载
     fetch(url)
       .then(res => res.blob())
       .then(blob => {
   
         const a = document.createElement('a')
         const objectUrl = window.URL.createObjectURL(blob)
         a.download = name
         a.href = objectUrl
         a.click()
       })
   },

方法二 （会出现跨域问题）

fetch(url).then(res => res.blob()).then(blob => {
    // 将链接地址字符内容转变成blob地址
      const a = document.createElement('a')
      a.href = URL.createObjectURL(blob)
      console.log(a.href)
      a.download = res.success.fileName  // 下载文件的名字
      document.body.