【常用】element-ui/moment.js/echarts.js等

漂移的电子2026-03-28 9:07

目录

element-ui

el-table

js 复制代码 
<template>
<div>
      <el-header class="container">
      <!-- 查询条件 -->
      <el-form :model="systemForm" ref="systemForm" label-width="120px" size="mini" :inline="true" width="100%">
        <el-row style="width: 100%">
          <el-col :span="6">
            <el-form-item :label="tableHeader[0].fieldName">
              <el-input type v-model="systemForm[tableHeader[0].fieldValue]" autocomplete class="text_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="tableHeader[2].fieldName">
              <el-input type v-model="systemForm[tableHeader[2].fieldValue]" autocomplete class="text_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3" style="float:right">
            <div class="btn-group">
              <button id="btn_query" @click="getData" type="button" class="btn_query btn_small">
                <span>查询</span>
              </button>
              <button id="btn_guarantee" @click="buiForm('systemForm')" type="button" class="btn_reset btn_small">
                <span>重置</span>
              </button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-table :data="tableData" border stripe style="width: 100%;max-height: 650px;overflow: auto;" size="mini"
      :header-cell-style="{ background: '#27A8F9', color: '#FFFFFF' }">
      <el-table-column v-for="(item, index) in tableHeader" :key="index" :label="item.fieldName"
        :prop="item.fieldValue" :show-overflow-tooltip="true" align="center" :sortable="(item.type=='Number' && item.fieldValue !='f_ChillerID' && item.fieldValue !='f_BuildingID'  ) ? true:false"     
      :render-header="renderHeader">
        <template slot-scope="scope">
                    <span
                  v-if="item.fieldValue == 'f_Qmax' || item.fieldValue == 'f_RatedPower' || item.fieldValue == 'f_RatedCOP'">
                  {{ $formatIntl.intl(scope.row[item.fieldValue]) }}
                </span>
                <span v-else>{{ scope.row[item.fieldValue] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button class="btn_mini btn_download" @click="buildingAdd(2, scope.row)">编辑</el-button>
          <el-button @click="DelClick(scope.row)" class="btn_mini btn_reset">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
       <el-footer style="margin-top: 10px;">
          <false-page :pageInfo="pageInfo" @currfalse-pageentChange="currentChange" @pagesize="pagesize"
            @setData="setData"></false-page>
        </el-footer>
 </div>
<script>
export default {
  data() {
    return {
      tableData: [],
      tableHeader: [
        { fieldName: "冷机ID", fieldValue: "f_ChillerID", type: 'Number' },
        { fieldName: "楼宇ID", fieldValue: "f_BuildingID", type: 'Number' },
        { fieldName: "冷机名", fieldValue: "f_ChillerName", type: 'String' },
      ],
      //分页数据
      pageInfo: {
        currentPage: 1,
        pageSize: 10,
        dataTotal: 0,
        dataList: []
      },
      systemForm: {
        f_ChillerID: "",
        f_ChillerName: "",
      },
    }
  },
  created() {

  },
  methods: {
    // 表头
    renderHeader(h, params) {
      return h('el-tooltip', {
        props: {
          transfer: true
          //placement:"bottom-start
        }
      },
        [
          h('span', params.column.label),
          h('div', {
            slot: 'content'
          },
            [
              h('p', params.column.label)
            ]
          )
        ]
      )
    },
    //重置
    buiForm(systemForm) {
      this.systemForm = {};
      this.$refs[systemForm].resetFields();
      this.getData()
    },
    //查询数据
    getData() {
      let data=[]
      this.pageInfo.dataList = data;
        this.pageInfo.currentPage = 1;
        this.pageInfo.dataTotal = data.length;
    },
    //当前页码
    currentChange(page) {
      this.pageInfo.currentPage = page;
    },
    //当前页
    pagesize(size) {
      this.pageInfo.pageSize = size;
      this.getData();
    },
    //设置表格数据
    setData(list) {
      this.tableData = list;
    },
  }
};
</script>

el-table 某竖行样式函数、某行样式函数

js 复制代码 
<el-table :data="tableData3" border v-loading="loading" element-loading-text="正在载入"
    element-loading-spinner="el-icon-loading" style="width:98%;max-height:401px;"
    class="tableClass" :row-style="rowStyle" :cell-style="cellStyle" ref="tableRef">
    <el-table-column v-for="(item, index) in tableHeader" :key="index" :prop="item.fieldValue"
        :label="item.fieldName" :show-ov0erflow-tooltip="true" align="center"
        :class-name="item.className">
        <template slot-scope="scope">
            <span>{{ scope.row[item.fieldValue] }}</span>
        </template>
    </el-table-column>
</el-table>

data(){
return{
	tableHeader:[
		 { fieldName: "项目", fieldValue: "col1",className:"colClass"},
		 ]
	}
}
methods: {
  //表格列样式
  cellStyle({ row, column, rowIndex, columnIndex }) {
         if (columnIndex === 0) {
             return { color: '#20B6FF!important' }; // 第一列文字红色
         }
         return {}; // 其他列默认样式
     },
     //表格行样式
     rowStyle({ row, rowIndex }) {
         if (rowIndex % 2 === 0) {
              return { backgroundColor:'#104D82!important' }; //偶行
         } else {
             return { backgroundColor:'#072C4C!important' }; 
         }
     }
}

el-table 横列合并

js 复制代码 
<el-table :data="tableData" border style="width: 100%" :span-method="arraySpanMethod">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="商品名称"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

data() {
    return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
        }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
        }, {
            date: '2016-05-01',
            name: '张小刚',
            address: '上海市普陀区金沙江路 1519 弄'
        }, {
            date: '2016-05-03',
            name: '张小刚',
            address: '上海市普陀区金沙江路 1516 弄'
        }]
    }
},
 methods: {   
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 1) { // 假设我们要合并"商品名称"列，即 columnIndex 为 1（从0开始计数）
            if (rowIndex % 2 === 0) { // 每两行合并一次，可以根据实际情况调整条件
                return {
                    rowspan: 2, // 跨越两行
                    colspan: 1 // 不改变列宽，这里通常是1，因为我们只合并行
                };
            } else {
                return {
                    rowspan: 0, // 当前行不显示（因为是合并的一部分）
                    colspan: 0 // 当前列不显示（因为是合并的一部分）
                };
            }
        }
    }
},

el-table表头

css 复制代码 
::v-deep .el-table__header-wrapper {
  height: 90px; /* 设置表头高度 */
  line-height: 90px;
}
::v-deep .el-table__header th {
  height: 90px; /* 设置表头内单元格的高度 */
  line-height: 90px;
  word-break: keep-all;   /* 表头英文单词换行不截断 */
}
::v-deep .el-table--mini .el-table__cell {
    padding: 0;
}

el-table类1 分页

js 复制代码 
<template>
    <div class="show-container">
      <el-table
        :data="tableData.length>0 ? (tableData.slice((pageInfo.currentPage - 1) * pageInfo.pageSize, pageInfo.currentPage * pageInfo.pageSize)):[]"
        border stripe style="width: 100%;max-height: 650px;overflow: auto;" size="mini"
        :header-cell-style="{ background: '#27A8F9', color: '#FFFFFF' }">
        <el-table-column v-for="(item, index) in tableHeader" :key="index" :label="item.fieldName"
          :prop="item.fieldValue" :show-overflow-tooltip="true" align="center"
          :sortable="item.type == 'Number' ? true : false"
          :render-header="renderHeader">
          <template slot-scope="scope">
            {{ scope.row[item.fieldValue] }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button class="btn_mini btn_download" @click="buildingAdd(2, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-footer>
        <false-pages :pageInfo="pageInfo" @currentChange="currentChange" @pageSizeChange="pagesize"></false-pages>
      </el-footer>
    </div>
</template>
<script>
import falsePages from "@/components/page/index";
export default {
  components: { falsePages },
    data(){
        return {
            tableHeader: [
                { fieldName: "序号", fieldValue: "id", type: 'Number' },
                { fieldName: "账号", fieldValue: "acctid", type: 'Number' },
            ],
            tableData: [],
            pageInfo: {
                currentPage: 1,
                pageSize: 10,
                total: 0
            },
        }
    },
    created(){
      this.getData()
    },
    mounted(){

    },
    methods:{
      //点击查询按钮
      search() {
        this.pageInfo.currentPage = 1;
        // 移除组件
        this.update = false;
        this.$nextTick(() => {
          this.update = true;
        });
        this.getData();
      },
      async getData() {
        let data=[]
        this.pageInfo.total =data.length;
        this.tableData = data;
      },
       //当前页码
       currentChange(page) {
            this.pageInfo.currentPage = page;
            this.getData();
        },
        pagesize(size) {
            this.pageInfo.pageSize = size;
            this.getData();
        },
    }
}
</script>

el-table类2 分页

js 复制代码 
  //任务列表  
getData() {
//...
        this.tableData0 = data;
        this.pageInfo.total = data.length;
        this.update = false;
        this.$nextTick(() => {
            this.pageFn();
            this.update = true;
        })
},
//当前页码
currentChange(page) {
    this.pageInfo.currentPage = page;
    this.pageFn()
},
//当前页
pagesize(size) {
    this.pageInfo.pageSize = size;
    this.pageFn()
},
//前端分页
pageFn() {
    let val = this.pageInfo.currentPage
    let start = (val - 1) * this.pageInfo.pageSize;
    let end = val * this.pageInfo.pageSize;

    let data = this.tableData0;
    if (this.pageInfo.total < end) {
        end = this.pageInfo.total;
    }
    this.tableData = [];
    for (var i = start; i < end; i++) {
        this.tableData.push(data[i])
    }
},

el-table类 有input编辑

js 复制代码 
<el-table v-loading="loading" element-loading-text="正在载入" element-loading-spinner="el-icon-loading" :data="tableData" style="width: 100%;overflow-y: auto; max-height: 400px;">
    <el-table-column v-for="(item, index) in tableHeader" :key="index" :prop="item.fieldValue"
        :label="item.fieldName" :show-overflow-tooltip="true" align="center"  :render-header="addRedStar">
        <template slot-scope="scope">
            <span v-if="item.fieldValue == 'id'">
                {{ scope.row[item.fieldValue] }}
            </span>
            <span v-else><el-input type="text" v-model="scope.row[item.fieldValue]"
                    placeholder="请输入" /></span>
        </template>
    </el-table-column>
</el-table>

<script>
export default {
    data() {
        return {
            loading:false,
            tableData:[],
            tableHeader: [
            { fieldName: "用户名称", fieldValue: "id"},
            { fieldName: "公摊比例", fieldValue: "id1"},
            { fieldName: "变更原因", fieldValue: "id2"},
            ],
        }
    },
    methods: {
        // 给表头加必填符号*
        addRedStar(h, { column, $index }) {
            let arr = []
            if ($index == 1) {
                arr = [
                    h("span", { style: "color: red" }, "*"),
                    h("span", " " + column.label),
                ];
            }else{
                arr=[
                    h("span", " " + column.label),
                ];
            }
            return arr
        },
    }
}
</script>

el-table类 Checkbox

js 复制代码 
<el-table ref="multipleTable" :data="tableData1" tooltip-effect="dark" style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55">
    </el-table-column>
    <el-table-column prop="name" label="楼宇名称">
    </el-table-column>
    <el-table-column prop="address" label="所属单位" show-overflow-tooltip>
    </el-table-column>
</el-table>

<script>
export default {
    data(){
        return{
            filterText2: "",
            tableData01:[{name:'111',address:11},{name:'222',address:22},{name:'333',address:33}],
            tableData1:[],
            multipleSelection: [],
        }
    },
    watch: {
        filterText1(val) {
            if (val) {
                let arr = this.tableData1;
                let filteredArr = arr.filter(item => item.name.includes(val));
                this.tableData1 = filteredArr;
            }else{
                this.tableData1=this.tableData01;
            }
        }
    },
    mounted(){
        this.getData()
        this.tableData1=this.tableData01;
    },
    methods:{
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

    }
}
</script>

el-table input可编辑保存

js 复制代码 
    <el-table :data="tableData3" style="width: 100%">
        <el-table-column v-for="(item, index) in tableHeader3" :key="index" :prop="item.fieldValue"
            :label="item.fieldName" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
                <span v-if="item.fieldValue == 'f_UnitName'">
                    {{ scope.row[item.fieldValue] }}
                </span>
                <span v-else>
                    <el-input type="text" v-model="scope.row[item.fieldValue]" placeholder="请输入" @input="onExchange(scope.$index)" />
                </span>
            </template>
        </el-table-column>
    </el-table>



tableHeader3: [
   { fieldName: "用户名称", fieldValue: "f_UnitName" },
   { fieldName: "公摊比例", fieldValue: "f_EquallyShared2" },
],
//methods
onExchange(index) {
    let moment = this.tableData3[index]; // 此处的tableData3为自己的table表格绑定的data数组
    this.$set(this.tableData3, index, moment);
},

this.$confirm 只有一个确认按钮

js 复制代码 
      this.$confirm('当前未生成用能账单，请先生成。', '提示', {
          confirmButtonText: '确定', //确认按钮的文字
          showCancelButton: false, //是否显示取消按钮
          showClose: false, //是否显示关闭按钮
          closeOnClickModal: false, //是否可以通过点击空白处关闭弹窗
          type: 'warning'
      }).then(() => {
          return
      }).catch(() => { });

el-input 无法输入内容的解决方法

js 复制代码 
<el-input v-model="formData.f_WarnUp" type="number"   @input="changeInput2"/>

changeInput() {
 this.$forceUpdate()
},
js 复制代码 
<el-input v-model="formData.tntOffMin" placeholder="请输入" @input="handleInput0"></el-input>
handleInput(value) {
       const num = parseInt(value, 10);
       if (!isNaN(num)) {
           this.formData.advOnMin= Math.min(Math.max(num, 0), 15); // 确保数字在0到15之间
       } else {
           this.formData.advOnMin = ''; // 如果输入的不是数字，清空输入框
       }
   },

el-button

js 复制代码 
<template>
    <div>
        <el-button-group class="button-group">
            <el-button v-for="(item, index) in lists" :key="index" @click="selectClick(item)" size="mini"
                :type="activeButtonType == item.value ? 'primary' : ''">
                {{ item.label }}
            </el-button>
        </el-button-group>
    </div>
</template>
<script>
export default {
   data() {
       return {
           activeButtonType: "week",
           lists: [{ label: "近一周", value: "week" }, { label: "近一月", value: "month" }]
       }
   },
   methods: {
    selectClick(item){
      this.activeButtonType = item.value;
      let val= item.value;
    },
  }
}
</script>
<style lang="scss" scoped>
.button-group {
    margin-left: auto;
    height: fit-content;
}
</style>

el-select 数据内搜索

js 复制代码 
<el-select v-model="value" placeholder="请选择" clearable filterable size="mini" style="width: 200px;">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
    </el-option>
</el-select>

el-select 属性

clearable

filterable 可以搜索

allow-create 可以输入

el-upload 上传图片

js 复制代码 
<template>
    <div>
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="50%">
            <el-form :model="form" :rules="rules" ref="ruleForm" label-width="150px" class="elForm">
                <el-form-item label="上传图片">
                    <el-upload ref="imgUpload" :auto-upload="false" :class="{ hide: hideUpload }"
                        :file-list="fileInfo.imgList" :on-change="imgChange" :on-preview="file => {
                            dialogImageUrl = file.filePath;
                            dialogVisible = true;
                        }
                            " :on-remove="imgRemove" action="123" list-type="picture-card">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :append-to-body="true" :modal-append-to-body="false" :visible.sync="dialogVisible"
                        class="img-dialog">
                        <img :src="dialogImageUrl" alt="" width="100%" />
                    </el-dialog>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" :loading="btnLoading" @click="submit">{{ btnLoading ? "提交中" : "确 定"
                    }}</el-button>
                <el-button @click="cancelDialog()">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            dialogFormVisible: false,
            rules: {
                // locname: [{ required: true, message: "地点名称是必填字段" }]
            },
            hideUpload: false, //图片>=4 隐藏添加按钮
            dialogVisible: false,
            dialogImageUrl: "",
            //图片 及 文件
            fileInfo: {
                fileList: [], //upload -绑定的文件集合
                imgList: [], //upload -绑定的图片集合
                formFileList: [],
                formImgList: [],
            },
        }
    },
    created() { },
    mounted() { },
    methods: {
        //删除图片
        imgRemove(file, fileList) {
            // this.hideUpload = fileList.length >= 4;
            this.fileInfo.formImgList = fileList;
        },
        //图片发生改变时
        imgChange(file, fileList) {
            console.log(file, fileList, 'file, fileList_999')
            file.raw.fileType = 10;
            // this.hideUpload = fileList.length >= 4;
            let type = file.raw.type;
            let isType =
                ["image/jpeg", "image/jpg", "image/bmp", "image/png"].indexOf(
                    file.raw.type
                ) != -1;
            let isLt10M = file.size / 1024 / 1024 < 10;
            if (!isType) {
                fileList.length--;
                this.$message.error("图片只能是jpeg、jpg、bmp、png格式!");
            }
            if (!isLt10M) {
                fileList.length--;
                this.$message.error("上传图片大小不能超过 10MB!");
            }
            this.fileInfo.formImgList = fileList;
        },
        //提交
        submit() {
            this.$refs.ruleForm.validate(async (valid) => {
                if (!valid) return;
                let fileList = this.fileInfo.formFileList.concat(
                    this.fileInfo.formImgList
                );
                //判断文件集合
                if (fileList.length == 0) {
                    //没文件 直接提交数据信息
                    this.submitBaseInfo();
                } else {
                    // 有先提交文件  再提交数据信息并传入返回的文件路径
                    let fileData = new FormData();
                    //提取需要提交的文件数据
                    let needFile = fileList
                        .filter((item) => item.raw)
                        .map((item) => item.raw);
                    needFile.forEach((item) => {
                        fileData.append("files", item);
                    });
                    // fileData.append("portType", 1);
                    // fileData.append("second", 0);
                    //修改前已经提交过的文件 不需要再提交
                    let doNeedFile = fileList.filter((item) => !item.raw);
                    doNeedFile = JSON.parse(
                        JSON.stringify(doNeedFile).replace(/url/g, "filePath")
                    );
                    if (needFile.length > 0) {
                        this.btnLoading = true;
                        ywLocFileUploadProgress(fileData)
                            .then((res) => {
                                let { code, msg, data } = res;
                                if (code == 200) {
                                    let API_ROOT = `${sessionStorage.getItem("apiUrlPrefix")}`;
                                    let IP = API_ROOT.replace(/api\//g, "");
                                    let fileUrlList = data.map((item) => {
                                        item.filePath = IP + item.filePath;
                                        // item.filePath = `http://39.99.150.49/ncdx/BEEWebAPI/${item.filePath}`;
                                        // item.fileType = 50;
                                        return item;
                                    });
                                    this.btnLoading = false;
                                    this.submitBaseInfo(fileUrlList.concat(doNeedFile));
                                } else {
                                    this.btnLoading = false;
                                    this.$message.error(msg);
                                }
                            })
                            .catch((err) => {
                                console.log(err);
                            });
                    } else {
                        this.submitBaseInfo(doNeedFile);
                    }
                }
            });
        },
        submitBaseInfo(fileUrlList) {
            let request = AddSysLocale; //添加
            let payload = {
                locname: this.form.locname,
                rfidTID: this.form.rfidTID,
                coordX: this.form.coordX,
                coordY: this.form.coordY,
                coordZ: this.form.coordZ,
                memo: this.form.memo,
            };
            fileUrlList ? (payload.locFile = fileUrlList) : "";
            if (this.dialogType == "edit") {
                request = UpdateSysLocale;
                payload.locnum = this.selectedData.locnum;
            }
            if (this.dialogType == "del") {
                request = DeleteSysLocale;
                payload.locnum = this.selectedData.locnum;
            }
            request(payload)
                .then(res => {
                    // if (res.code == 200) {
                    //     this.dialogFormVisible = false;
                    //     this.resetForm("ruleForm");
                    //     this.dialogType == "add" && this.$message.success("新增成功");
                    //     this.dialogType == "edit" && this.$message.success("编辑成功");
                    //     this.dialogType == "del" && this.$message.success("删除成功");
                    //     this.getData();
                    // } else {
                    //     this.dialogType == "add" && this.$message.error("新增失败");
                    //     this.dialogType == "edit" && this.$message.error("编辑失败");
                    //     this.dialogType == "del" && this.$message.error("删除失败");
                    // }
                })
                .catch(err => {
                    // this.dialogType == "add" && this.$message.error("新增失败");
                    // this.dialogType == "edit" && this.$message.error("编辑失败");
                });
        },
        resetForm(formName) {
            setTimeout(() => this.$refs[formName].resetFields(), 200);
        },
        cancelDialog() {
            this.dialogFormVisible = false;
            this.resetForm("ruleForm");
        },

    }
}
</script>

进度条 el-progress

js 复制代码 
<el-progress type="circle" :percentage="80" width="60" text-color="#ffffff" color="#10D2DC"></el-progress>
css 复制代码 
::v-deep .el-progress__text {
    font-size: 14px !important;
}
/deep/ .el-progress-circle__track {
	stroke: #1D4F8C;
}

moment.js

MomentJS-日期验证

js 复制代码 
var a = moment("2018-18-10T10:20:25");
a.isValid();  //true  false
a.invalidAt(); //1 0

获取该天的时间信息

js 复制代码 
function isCurrentMonth(inDate) {
    const now = new Date();
    const t = new Date(inDate);
    let t1 = moment(now).format('YYYY-MM')
    let t2 = moment(t).format('YYYY-MM')
    return t1 == t2;
}

function getLastDayOfWeek(sp) {
   let date = new Date(sp);
   // 将日期设置为本周的第一天（周一）
   date.setDate(date.getDate() - date.getDay() + (date.getDay() === 0 ? -6 : 1)); // 如果今天是周日，向前调整6天；否则，向前调整到周一
   // 将日期设置为本周的最后一天（周日）
   date.setDate(date.getDate() + 6); // 直接加6天得到周日
   // 直接返回最后一天的日期值即可，无需额外的月份天数计算
   let dayNumber = date.getDate(); // 本周末尾日期
   return dayNumber
}
function dateFn(sp) {
    let dayNumber = getLastDayOfWeek(sp)
    const monthDays = moment(sp).daysInMonth(); // 获取本月总天数
    const weeks = Math.ceil(monthDays / 7); // 计算本月总周数
    let dayOfMonth = moment(sp).format("D");
    let startDate = "";
    let endtDate = "";
    if (dayOfMonth <= 7 && dayNumber <= 7) {
        startDate = moment(sp).startOf('month').format('YYYY-MM-DD');
        endtDate = moment(sp).endOf('week').add(1, "days").format("YYYY-MM-DD");
    } else if (dayNumber == monthDays) {
        startDate = moment(sp).startOf('week').format("YYYY-MM-DD");
        endtDate = moment(sp).endOf('month').format('YYYY-MM-DD');
    } else {
        startDate = moment(sp).startOf('week').add(1, "days").format("YYYY-MM-DD");
        endtDate = moment(sp).endOf('week').add(1, "days").format("YYYY-MM-DD");
    }
    console.log(`本月共 ${weeks} 周`)
    console.log(`现在是 ${dayOfMonth} 号`)
    console.log(`本周末尾是 ${dayNumber} 号`)
    console.log(`本月共 ${monthDays} 天`);
    console.log(`周一至周日：` + startDate + `~` + endtDate)
    return { "weeks": weeks, "dayOfMonth": dayOfMonth, "dayNumber": dayNumber, "monthDays": monthDays, "startDate": startDate, "endtDate": endtDate }
}

const sp = moment("2026-01-05");
console.log('该天的时间信息：',dateFn(sp))

subtract/add

js 复制代码 
const yesterday1 = moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss');
//console.log('前天：', yesterday1);
const tomorrow = moment().add(1, 'days').format('YYYY-MM-DD HH:mm:ss');
//console.log('后天：', tomorrow);

天周月 startOf/endOf

js 复制代码 
let dayStart = moment().startOf("days").format('YYYY-MM-DD HH:mm:ss');
let dayEnd = moment().endOf("days").format('YYYY-MM-DD HH:mm:ss');
//console.log("当天初:" + dayStart,"当天末:" + dayEnd)  //当天初:2026-01-21 00:00:00 当天末:2026-01-21 23:59:59

let weekStart = moment().startOf("week").format("YYYY-MM-DD");
let weekEnd = moment().endOf("week").format("YYYY-MM-DD");
//console.log("上周日:" + weekStart,"本周六:" + weekEnd)

let monthStart = moment().startOf('month').format('YYYY-MM-DD')
let monthEnd = moment().endOf('month').format('YYYY-MM-DD')
//console.log("月初:"+monthStart,"月末:"+monthEnd)

let quarterStart = moment().startOf('quarter').format('YYYY-MM-DD')
let quarterEnd = moment().endOf('quarter').format('YYYY-MM-DD')
//console.log("季度初:"+quarterStart,"季度末:"+quarterEnd)

let yearStart = moment().startOf('year').format('YYYY-MM-DD')
let yearEnd = moment().endOf('year').format('YYYY-MM-DD')
//console.log("年初:"+yearStart,"年末:"+yearEnd)

时间点比较：

js 复制代码 
// 创建一个moment对象表示当前时间
const now = moment();
const someTime =moment("2026-01-05");
//方法1
if(new Date(now).getTime() >=  new Date(someTime).getTime()){
 console.log("someTime是小于当前时间的");
}
//方法2
if (someTime.isBefore(now)) {
    console.log("someTime是小于当前时间的");
}

获取时间整点：

js 复制代码 
function getWholeHours(startTime, endTime) {
    const start = moment(startTime);
    const end = moment(endTime);
    const hours = [];

    let current = moment(start);
    while (current.isBefore(end) || current.isSame(end)) {
        hours.push(moment(current).format('YYYY-MM-DD HH:00:00')); // 格式化为整点时间格式
        current.add(1, 'hour'); // 增加一个小时
    }

    return hours;
}
const startTime = moment().startOf('day').format(); // 获取今天的0点时刻
const endTime = moment().format(); // 获取当前时间
const wholeHours = getWholeHours(startTime, endTime);
console.log(wholeHours);   
// [
//     "2026-01-21 00:00:00",
//     "2026-01-21 01:00:00",
//     "2026-01-21 02:00:00",
//     "2026-01-21 03:00:00",
//     "2026-01-21 04:00:00",
//     "2026-01-21 05:00:00",
//     "2026-01-21 06:00:00",
//     "2026-01-21 07:00:00",
//     "2026-01-21 08:00:00",
//     "2026-01-21 09:00:00",
// ]

下载/导出文件

导出文件pdf

js 复制代码 
function fetchAndDownloadPDF(url) {
  axios({
    url: url,
    method: 'GET',
    responseType: 'blob' // 重要：确保设置为 'blob' 来处理二进制数据
  }).then(response => {
    const pdfBlob = new Blob([response.data], { type: 'application/pdf' });
    const pdfUrl = URL.createObjectURL(pdfBlob);
    const link = document.createElement('a');
    link.href = pdfUrl;
    const name=response.headers.filename
    link.setAttribute('download',  name + '.pdf'); // 设置下载文件名
    document.body.appendChild(link);
    link.click();

    // 清理并移除元素
    document.body.removeChild(link);
    URL.revokeObjectURL(pdfUrl); // 释放 URL 对象
  }).catch(error => {
    console.error('Error fetching the PDF file:', error);
  });
}
fetchAndDownloadPDF(url)

//方法二、
function fetchAndDownloadPDFWithFetch(url) {
    fetch(url)
        .then(response => response.blob()) // 直接获取 blob 数据
        .then(blob => {
            const pdfUrl = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = pdfUrl;
            link.setAttribute('download', 'filename.pdf'); // 设置下载文件名
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link); // 清理并移除元素
            URL.revokeObjectURL(pdfUrl); // 释放 URL 对象
        })
        .catch(error => {
            console.error('Error fetching the PDF file:', error);
        });
}
fetchAndDownloadPDFWithFetch(url)

1、下载pdf文件

解决： pdf 文件在浏览器里面直接下载而不是打开

解决方式就是将PDF文件的 MIME type 改为 application/octet-stream 并加入 Content-Disposition:attachment header，原本的 pdf 文件 MIME type 为 application/pdf，浏览器识别到这个 type 之后会自动在浏览器打开，所以说我们在这里修改 type 即可。

js 复制代码 
handlePdfLink(url, filename) {
  fetch(url, {
    method: 'get',
    responseType: 'arraybuffer',
  })
    .then(function (res) {
      if (res.status !== 200) {
        return res.json()
      }
      return res.arrayBuffer()
    })
    .then((blobRes) => {
      // 生成 Blob 对象，设置 type 等信息
      const e = new Blob([blobRes], {
        type: 'application/octet-stream',
        'Content-Disposition': 'attachment'
      })
      // 将 Blob 对象转为 url
      const link = window.URL.createObjectURL(e)
      this.handleFileDownload(link, filename)
    }).catch(err => {
      console.error(err)
    })
},
handleFileDownload(url, filename) {
  // 创建 a 标签
  let a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
},

2、docx文件下载

js 复制代码 
<a href='url' download='文件名'></a>

3、pdf文件预览

js 复制代码 
window.open(url);

导出excel文件

API

js 复制代码 
   axios({
       url: url,
       method: 'GET',
       responseType: 'blob', // 重要：确保设置为 'blob' 来处理二进制数据
   }).then(response => {
       let title = response.headers.filename
       const Url = URL.createObjectURL(response.data);
       const link = document.createElement("a");
       link.href = Url;
       link.download = title;
       link.click();
       link.remove();
       URL.revokeObjectURL(url);
   }).catch(error => {
       console.error('Error fetching the PDF file:', error);
   });

或者

js 复制代码 
<el-button type="primary" :loading="item.downloadLoading"  @click="exprotExcel(item,index)">导出</el-button>

 exprotExcel(item, index) {
    let that = this;
    axios.get(url, { responseType: 'blob' })
    .then(response => {
        that.lists[index].downloadLoading = false;
        let title = response.headers.filename 
        if (response.status === 200) {
            const Url = URL.createObjectURL(response.data);
            const link = document.createElement("a");
            link.href = Url;
            link.download = title;
            link.click();
            link.remove();
            URL.revokeObjectURL(url);
        }
    })
    .catch(error => {
        that.lists[index].downloadLoading = false;
        console.error('请求失败:', error);
    });
}

常用配置问题

浏览器关闭跨域限制

js 复制代码 
"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=C:\chrome-dev-data\ --lang=zh-CN

浏览器快捷键

复制代码 
ctrl+H    清缓存
ctrl+F5   刷新

js 获取连接参数

方法一、使用split()方法：

js 复制代码 
  const urlSearch = window.location.search;
  var querys = urlSearch.substring(urlSearch.indexOf("?") + 1).split("&");
  // 创建一个对象来存储参数
  const paramsObject = {};
  querys.forEach(param => {
      const [key, value] = param.split("=");
      paramsObject[key] = decodeURIComponent(value);
  });
  if (paramsObject.hasOwnProperty('ncu')) {
      sessionStorage.ncu = paramsObject.ncu;
  }

方法二、使用正则表达式：

js 复制代码 
function getParamValue(paramName) {
    const regExp = new RegExp('[?&]' + paramName + '=([^&#]*)');
    const results = regExp.exec(window.location.href);
    if (results) {
        return decodeURIComponent(results[1].replace(/\+/g, ' '));
    } else {
        return null;
    }
}
const bg = getParamValue('bg'); // 获取指定参数的值

vue2

:style && :class

js 复制代码 
 :style="{ backgroundImage: 'url(' + topBg + ')' }" 

<div v-for="(item, index) in devList" :key="`devList${index}`" class="main2_item">
     <div :style="{ backgroundImage: 'url(' + rightBg + ')' }"   @click="drawerClick(item)"
       :class="{'main2_active':(index%4==0 || index%4==1 || index%4==2),'main2_active2':(index/4>=1),'main2_div':true}">
       </div>
</div>

el-tree单选

js 复制代码 
<template>
  <div class="trees">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
        <el-tree
          class="filter-tree"
          node-key="id"
          check-on-click-node
          show-checkbox
          default-expand-all
          :check-strictly="strictly"
          :data="treeData"
          :props="defaultProps"
          :default-checked-keys="openData"
          :filter-node-method="filterNode"
          @check-change="getCheckedNodes"
          ref="tree"
        >
        </el-tree>
  </div>
</template>

<script>
export default {
  name: "TreeRadio",
  props: ["flag"],
  data() {
    return {
      filterText: "",
      openData: [],
      //树状图0为单选 1为多选
      chooseFlag: 0,
      strictly: true,
      treeData:[{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },

    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
  },
  mounted() {
    window.onresize = () => {};
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.cName.indexOf(value) !== -1;
    },
    getCheckedNodes(data, checked, flag) {
      if (this.chooseFlag == 0) {
        if (checked) {
          let arr = [data.id];
          this.$refs.tree.setCheckedKeys(arr);
          this.$emit('getChecked', arr);
        }
      }
    },

  },
};
</script>

<style lang="scss" scoped>
.trees {
  ::v-deep .el-tabs__item {
    width: 135px;
    text-align: center;
  }

  ::v-deep .el-tabs__nav {
    width: 100%;
  }

  ::v-deep .el-tree {
    max-height: 700px;
    //width:260px;
    overflow: auto;
  }

  ::v-deep .el-tree-node {
    white-space: normal;
    outline: 0;
  }

  ::v-deep .el-tree-node__content {
    height: auto;
    min-height: 26px;
    align-items: flex-start;
  }
  ::v-deep .el-tree-node__content > .el-tree-node__expand-icon {
    padding-top: 4px;
  }
  ::v-deep .el-checkbox__inner {
    border-radius: 50%;
  }
  ::v-deep .el-tabs__nav.is-top {
    display: flex;
    > div {
      flex: 1;
      min-width: fit-content;
    }
  }
}
</style>

el-tree多选

js 复制代码 
<template>
  <div class="trees">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
        <el-tree
          class="filter-tree"
          node-key="id"
          check-on-click-node
          show-checkbox
          default-expand-all
          :check-strictly="strictly"
          :data="treeData"
          :props="defaultProps"
          :default-checked-keys="openData"
          :filter-node-method="filterNode"
          @check-change="getCheckedNodes"
          ref="tree"
        >
        </el-tree>
  </div>
</template>

<script>
export default {
  name: "TreeCheck",
  props: ["flag"],

  data() {
    return {
      filterText: "",
      openData: [],
      //树状图0为单选 1为多选
      chooseFlag: 1,
      strictly: true,
      treeData:[{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },

    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
  },
  mounted() {
    window.onresize = () => {};
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.cName.indexOf(value) !== -1;
    },
    getCheckedNodes(data, checked, flag) {
      // this.$emit('getChecked');
    },

  },
};
</script>

<style lang="scss" scoped>
.trees {
  ::v-deep .el-tabs__item {
    width: 135px;
    text-align: center;
  }

  ::v-deep .el-tabs__nav {
    width: 100%;
  }

  ::v-deep .el-tree {
    max-height: 700px;
    //width:260px;
    overflow: auto;
  }

  ::v-deep .el-tree-node {
    white-space: normal;
    outline: 0;
  }

  ::v-deep .el-tree-node__content {
    height: auto;
    min-height: 26px;
    align-items: flex-start;
  }
  ::v-deep .el-tree-node__content > .el-tree-node__expand-icon {
    padding-top: 4px;
  }
  // ::v-deep .el-checkbox__inner {
  //   border-radius: 50%;
  // }
  ::v-deep .el-tabs__nav.is-top {
    display: flex;
    > div {
      flex: 1;
      min-width: fit-content;
    }
  }
}
</style>

引用 el-tree

js 复制代码 
<template>
    <div>
        <el-row :gutter="10">
            <el-col :span="6">
                <treeRadio ref="Tree" @getChecked="getChecked"/>
            </el-col>
            <el-col :span="6">
                <TreeCheck ref="Tree1" @getChecked="getChecked1"/>
            </el-col>
            <el-col :span="6"></el-col>
            <el-col :span="6"></el-col>
        </el-row>
    </div>
</template>
<script>
import treeRadio from "./components/treeRadio.vue";
import TreeCheck from "./components/treeCheck.vue"
export default {
    components: {
        treeRadio,TreeCheck
    },
    data(){
        return{

        }
    },
    mounted(){

    },
    methods:{
        getChecked(val){
            const tree = this.$refs.Tree;
            console.log('tree',tree.$refs.tree.getCheckedNodes())
        },
        getChecked1(val){
            const tree = this.$refs.Tree1;
            console.log('tree1',tree.$refs.tree.getCheckedNodes())
        }
    }
}
</script>

watch

js 复制代码 
watch: {
  isAdd: {
      immediate: true,
      handler(isAdd) {
         
      }
  },
   "formData.f_WarnUp": {
      handler(newVal, oldVal) {
      
      },
      deep: true,
      immediate: true
  },
  info: {
      handler(val) {
          console.log(val,'val999')
      },
      deep: true,
  },
}
js 复制代码 
    //代表字母验证
    let validcode = (rule, value, callback) => {
      let reg = /[a-zA-Z]/;
      if (!reg.test(value)) {
        callback(new Error("只能输入字母"));
      } else {
        callback();
      }
    };

vue插件

v-distpicker 省市区三级联动

js 复制代码 
npm install v-distpicker --save

全局注册 main.js

js 复制代码 
// 引用地区选择器distpicker插件
import vdistpicker from 'v-distpicker'
// 注册全局地区选择器distpicker组件
Vue.component('v-distpicker', vdistpicker);

使用

js 复制代码 
<template>
    <div>
          <!-- <v-distpicker type="mobile" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker> -->
           <v-distpicker @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker>
    </div>
</template>
<script>
import vdistpicker from 'v-distpicker'
export default {
    components:{
		vdistpicker
    },
    data(){
        return{
          province: '', // 省
          city: '',  // 市
          area: '',  // 区
        }
    },
    created(){},
    mounted(){

    },
    methods:{
      onChangeProvince(province){
        this.province = province.value 
        console.log(province,'province_999')
      },    
      onChangeCity(city){
        this.city = city.value  
        console.log(city,'city_999')
      },
      onChangeArea(area){
        this.area = area.value
        console.log(area,'area_999')
      },
    }
}
</script>

出现兼容11问题 ，index.html

js 复制代码 
  <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>

V-Region 省市区街道四级联动

V-Region：Vue.js 中的中国行政区划选择器组件

1、 项目快速启动
安装

首先确保你的项目已经安装了 Vue2。然后，你可以通过 npm 或 yarn 来安装 v-region：

js 复制代码 
npm install v-region
# 或
yarn add v-region

引入与使用

在你的项目中，需要在 main.js 文件中全局注册 v-region 组件：

js 复制代码 
import Vue from 'vue';
import vRegion from 'v-region';
 
Vue.use(vRegion);

接着，在你的 Vue 组件中，你可以这样使用 v-region：

js 复制代码 
<template>
  <div>
    <v-region-selects 
      :town="true"
      v-model="selectedRegion"
      @change="selectRegionForm">
    </v-region-selects>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      selectedRegion: {}
    };
  },
  methods: {
    selectRegionForm(info) {
      console.log('Selected Region:', info);
    }
  }
};
</script>

2、应用案例和最佳实践

V-Region 很适合用于需要收集用户所在地区的 web 应用，如物流跟踪系统、在线购物网站等。以下是一些最佳实践：

使用 v-model 绑定选中区域的数据。

通过 @change 事件监听选定区域的变化，并做相应的逻辑处理。

根据应用需求，可调整是否展示乡镇级别的选择，通过:town属性控制，默认为 false。

js 复制代码 
<!-- 示例：只展示到区/县 -->
<v-region-selects 
  v-model="selectedRegion" 
  @change="selectRegion">
</v-region-selects>
 
<!-- 示例：展示到乡镇 -->
<v-region-selects 
  :town="true"
  v-model="selectedRegion" 
  @change="selectRegion">
</v-region-selects>

筛选、动态绑定类/样式

js 复制代码 
<div :class="isSpecial ? 'special-class' : ''">这是动态类</div>
<div :class="{ 'special-class': isSpecial }">这是动态类</div>
<div :class="isSpecial ? 'special-class another-class' : 'default-class'">这是动态类</div>
<div :class="{ 'special-class': isSpecial, 'another-class': isAnotherClass }">这是动态类</div>
<div :class="[isSpecial ? 'special-class' : '', isAnotherClass && 'another-class']">这是动态类</div>

<div :style="{ color: activeColor, fontSize: fontSize + 'px','background-color': bgColor  }">
    style动态样式
</div>
<div :style="[baseStyles, overridingStyles]">
    style动态样式
</div>

//变量
// isSpecial:true,
// isAnotherClass: false,

// activeColor: 'red',
// fontSize: 16,
// bgColor: '#f5f5f5',

// baseStyles: { color: 'blue' },
// overridingStyles: { fontSize: '20px' },

vue引入css三种方式

1、在对应.vue文件的中引入

js 复制代码 
<script>
import "@/assets/css/reset.css"
</script>
css 复制代码 
<style scoped>
@import '../../assets/css/VueCss.css';
</style>
vue 复制代码 
<style lang="scss" scoped>
@import '@/assets/css/common.css';
</style>

2、main.js 全局引入

js 复制代码 
import './assets/css/common.css'

el-cascader

js 复制代码 
        <el-cascader :options="mentData" v-model="myNum" @change="shareScopeChange" :props="{
            value: 'departNum',
            label: 'departName',
            children:'children',
            multiple: true,
            checkStrictly: true,
            emitPath: false,
            }" clearable ref="cascaderAddr"  style="width: 100%;"></el-cascader>


        data() {
            return {
                depNames:"",
                depNums:"",
                mentData: [],
                myNum: [],
                myName:[],
            }
        },
        watch: {
             depNames: {
                handler(val) {
                    if (val) {
                        console.log(val, "......");
                        this.myName = [];
                        this.myName = val.split(",");
                        console.log(this.myName,'this.myName111')
                    }
                },
                immediate: true,
            },
            depNums: {
                handler(val) {
                    if (val) {
                        console.log(val, "xcxxxx");
                        this.myNum = [];
                        this.myNum = val.split(",");
                    }
                },
                immediate: true,
            },
        },
        created() {
        },
        mounted() {
            this.init()
        },
        methods: {
            dataFn(){
               this.depNums= "NCDX-Dept02001,NCDX-SDZX-0101,NCDX-SDZX-0001,SDZX-GL-002,NCDX-SDZX-0001,SDZX-GL-003";
               this.depNames="北京华勤-大学运维组,大学后勤保障处水电中心,南昌大学后勤保障处水电中心/青山湖南北校区副主任,南昌大学后勤保障处水电中心/东湖南北校区副主任"
                let val = this.search(this.mentData,  this.depNums) // ["zhinan","shejiyuanze","yizhi"]
                this.myNum = val
                console.log(this.myNum,'this.myNum_999')
            },
            search(object, value) {
                for (var key in object) {
                    if (object[key].departNum == value) return [object[key].departNum];
                    if (object[key].children && Object.keys(object[key].children).length > 0) {
                        var temp = this.search(object[key].children, value);
                        if (temp) return [object[key].departNum, temp].flat();
                    }
                }
            },
            shareScopeChange(val) {
                console.log(val,'shareScopeChange')
                let arr = []
                let names = [];
                if (val) {
                    val.forEach(item => {
                        if (item.length > 0) {
                            item.forEach(x => {
                                arr.push(x)
                            })
                        }
                    })
                    arr = arr.filter((item, index) => arr.indexOf(item) === index);
                    let Str1 = arr.join()

                    this.$refs["cascaderAddr"].getCheckedNodes().forEach((item) => {
                        val.forEach((ites) => {
                            if (item.value == ites[ites.length - 1]) {
                                names.push(item.pathLabels.toString().replace(/,/gi, "/"));
                            }
                        });
                    });
                    let Str2 = "";
                    if (names.length > 0) {
                        Str2 = names.join()
                    }
                    console.log(Str1, Str2, 'Str1,Str2')
                }
            },
            init() {
                this.mentData = []
            }
      }
   }

el-date-picker

js 复制代码 
 <el-form :inline="true" ref="formData" :model="formData">
    <el-form-item label="开始日期：">
        <el-date-picker placeholder="开始日期" size="small" type="date"  v-model="date1" :picker-options="pickerOptions1"
            @change="changeTime1">
        </el-date-picker>
    </el-form-item>
     <el-form-item label="结束日期：">
        <el-date-picker placeholder="开始日期" size="small" type="date"  v-model="date2" :picker-options="pickerOptions2"
            @change="changeTime2">
        </el-date-picker>
    </el-form-item>
</el-form>

data () {
    return {
        formData: {},
        date1: moment().subtract(6, "days").startOf('day').format("YYYY-MM-DD HH:mm"),
        date2: moment().add(1, "days").startOf('day').format("YYYY-MM-DD HH:mm"),
        pickerOptions1: {
            // 设置禁用状态，参数为当前日期
            disabledDate(time) {
                // return time.getTime() < Date.now(); //当天不可选
                return time.getTime() < Date.now() - 86400000 //  - 86400000是否包括当天
            }
        },
        pickerOptions2: {
            // 设置禁用状态，参数为当前日期
            disabledDate(time) {
                // return time.getTime() < Date.now(); //当天不可选
                // return time.getTime() > Date.now() - 86400000 //  - 86400000是否包括当天
            }
        },
    }
},
 methods: {  
   changeTime1(data) {
       let t1 = moment(data).subtract("1", "day").format("YYYY-MM-DD")
       let q = new Date(t1).getTime();
       this.pickerOptions2 = {
           // 设置禁用状态，参数为当前日期
           disabledDate(time) {
               return time.getTime() < q
           }
       }
   },
   changeTime2(data) {
       let q1 = new Date(this.date1).getTime();
       let q2 = new Date(this.date2).getTime()
       if (q1 > q2) {
           this.$message.error("结束日期，不能早于开始日期");
           this.date2 = "";
       }
   }, 
},

搭建vue3、创建项目

js 复制代码 
npm create vue@latest

安装scss

js 复制代码 
npm install scss --save

安装element-plus

js 复制代码 
npm install element-plus --save
ts 复制代码 
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

安装axios

js 复制代码 
npm install axios

安装xlsx

js 复制代码 
npm install xlsx --save
js 复制代码 
//Vue 3 项目
import * as XLSX from 'xlsx'
js 复制代码 
<view>
	<view>1.选择要上传的文件：</view>
	<input id="selectedFile" type="file" name="files[]" accept=".sjs, .xlsx, .xlsm, .ssjson, .json, .csv" />
	<button @click="readExcelFile">读取文件并展示</button>
	<view id="excelTable" class="flex-center excel-table"></view>
</view>
js 复制代码 
function readExcelFile() {
	const excelFileInput = document.getElementById('selectedFile');
	// Check if a file is selected
	if (excelFileInput.files.length === 0) {
		alert('请选择要处理的文件!');
		return;
	}
	// Read the Excel file
	const file = excelFileInput.files[0];
	const reader = new FileReader();
	reader.readAsBinaryString(file);
	var tempArr = []
	reader.onload = function(e) {
		// Parse Excel data
		const data = e.target.result;
		const workbook = XLSX.read(data, {
			type: 'binary'
		});
		const worksheet = workbook.Sheets[workbook.SheetNames[0]];
		const html = XLSX.utils.sheet_to_html(worksheet)
		document.getElementById("excelTable").innerHTML = html
    }
}

git
node.js
node.js以往版本
vue.js
element-plus
day.js
moment.js
pinia
echarts
vue-orgchart
axios
iconfont

nextTick

js 复制代码 
import { ref,nextTick} from 'vue' //引入函数
let update = ref(true);
const handleClick = () => {
  update.value = false;
  nextTick(() => {
    update.value = true;
  });
}

echarts.js

js 复制代码 
  mounted(){
  this.bottomEchart = echarts.init(this.$refs.echartDom);
    this.bottomEchart1 = echarts.init(this.$refs.echartDom1);
    this.bottomEchart2 = echarts.init(this.$refs.echartDom2);
    this.bottomEchartArr = [
        this.bottomEchart,
        this.bottomEchart1,
        this.bottomEchart2,
    ];
    this.echartInit()
    this.echartInit1()
    this.echartInit2()
    this.resize()
},
methods:{
  resize() {
       window.addEventListener("resize", () => {
           this.bottomEchartArr.forEach(item => {
               if (item) {
                   item.resize();
               }
           });
       })
   },
 },
相关推荐
姓蔡小朋友2 小时前
Agent Skill设计模式
开发语言·javascript·设计模式
yaaakaaang2 小时前
（五）前端，如此简单！---变量
前端·javascript
2501_941982052 小时前
企微私域：实现企业通讯工具外部群消息的自动化主动推送
java·前端·javascript
三*一2 小时前
基于 Turf.js 实现高精度多边形修整工具（模拟 ArcGIS 修整功能）
开发语言·前端·javascript·arcgis·maobox gl·turf.js
wuhen_n2 小时前
终局之战：全链路性能体检与监控
前端·javascript·vue.js
xy34532 小时前
Axure 9.0 原生组件：让柱图实现动态交互（文本标签）
ui·交互·axure·原型·柱状图
csdn_aspnet2 小时前
ASP.NET Core：使用 JavaScript 加密并在控制器中解密
javascript·asp.net·.netcore
Front思3 小时前
electron桌面开发
前端·javascript·electron
前端飞行手册3 小时前
electron应用开发模板，集成多种解决方案
前端·javascript·学习·electron·前端框架·vue
热门推荐
012026年3月AI领域大事件：DeepSeek引领开源风暴02GitHub 镜像站点03围棋-html版本04班级宠物园部署指南05小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）06【计算机一级WPSoffice】小黑课堂题库软件下载安装教程（2026年3月最新版）07Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南08UV安装并设置国内源09OpenClaw 使用和管理 MCP 完全指南10中国象棋-html版本