elementui Vue js 前端小技巧笔记

1.Dialog中套用distpicker.js(elementui dialog提前渲染小技巧),若要初始化值的话,不可使用data-toggle="distpicker"固定写法

<el-dialog  @open="handleCompanyInfoFormOpen" ref="CompanyInfoForm"  :visible.sync="showCompanyInfoForm" ></el-dialog>
mounted(){
    this.$refs.CompanyInfoForm.rendered = true;
},
handleCompanyInfoFormOpen(){
    $('#distpicker').distpicker({
        province: remoteGlobal.userInfo.Company.AddrProvince,
        city: remoteGlobal.userInfo.Company.AddrCity,
        district: remoteGlobal.userInfo.Company.AddrDistrict,
    });
}

(20220526补充)

使用v-model绑定会导致distpicker因初始化值失败,导致市和区的数据变为undefined
所以正确的初始化方法是给每个distpickerd的select组件增加id,使用原生方法来初始化
这distpicker是真坑啊,以上的动态初始化所选值不正确(或者说能在某种情况下成功但是没有下面的例子完善),下面给出一版正确的例子

<div id="consigner_change_distpicker">
    <select class="form_distpicker_select" v-model='ChangeConsignerForm.AddrProvince' id="consignerChangeAddrProvince" data-province="选择省"></select>
    <select class="form_distpicker_select" v-model='ChangeConsignerForm.AddrCity' id="consignerChangeAddrCity" data-city="选择市"></select>
    <select class="form_distpicker_select" v-model='ChangeConsignerForm.AddrDistrict' id="consignerChangeAddrDistrict" data-district="选择区"></select>
    <el-input v-model="ChangeConsignerForm.Address" placeholder="地址补充" style="width: 142px"></el-input>
</div>

//初始化change表单的控件,并初始化distpicker控件,后续点开dialog不会出现无法点击的bug了
handleChangeConsignerFormOpen(){
    let tmpConsignerData = JSON.parse(JSON.stringify(vue_consignerinfo.ChangeConsignerForm));
    $('#consigner_change_distpicker').distpicker();
    $("#consignerChangeAddrProvince").val(tmpConsignerData.AddrProvince);
    $("#consignerChangeAddrProvince").trigger("change");
    $("#consignerChangeAddrCity").val(tmpConsignerData.AddrCity);
    $("#consignerChangeAddrCity").trigger("change");
    $("#consignerChangeAddrDistrict").val( tmpConsignerData.AddrDistrict);
},

2.表格中通过slot-scope来对某一列数据做合并(自定义数据展示效果)

<el-table-column prop="AddrProvince+AddrCity+AddrDistrict" label="所属区域" align="center">
    <template slot-scope="scope">
        <div>{{ (scope.row.AddrProvince+scope.row.AddrCity+scope.row.AddrDistrict) }}</div>
    </template>
</el-table-column>

3.vue中this.$set的用法

当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了，简单来说this.$set的功能就是解决这个问题的啦。
https://www.jianshu.com/p/6f28f5abee08

handleMouseEnter(data){
    this.$set(data, 'show', true);
},
handleMouseLeave(data){
    this.$set(data, 'show', false);
},

4. elementUI tree中增加功能性按钮+label过长时显示...(css处理)

.addrTree .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    padding-right: 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;        
}
.addrTree .em-tree-text{
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width:90%;
    text-overflow: ellipsis;
}
<div class="addrTree">
<el-tree ref="addrTree" :data="addrData" node-key="id" default-expand-all highlight-current>
    <span class="custom-tree-node" slot-scope="{ node, data }">
        <i class="el-icon-circle-close delIcon"></i>
        <el-tooltip effect="light" :content="node.label" placement="top" open-delay="500" node-key="id">
            <span class="em-tree-text" style="color: #e44646;">{{ getAddrName(node.label)[0] }}
                <span style="color: #6f7374;">{{ getAddrName(node.label)[1] }} </span>
            </span>
        </el-tooltip>
        <el-popconfirm v-if="node.level==1" title="确定删除发货地址吗？" @confirm="delSendAddrNode(node, data)">
            <i slot="reference"  class="el-icon-circle-close delIcon"></i>
        </el-popconfirm>
        <el-popconfirm v-if="node.level==2" title="确定删除收货地址吗？" @confirm="delSaveAddrNode(node, data)">
            <i slot="reference"  class="el-icon-circle-close delIcon"></i>
        </el-popconfirm>
    </span>
</el-tree>
</div>

5. js object对象,元素值相同合并

参考链接https://www.csdn.net/tags/OtTaQg3sNzY2OTEtYmxvZwO0O0OO0O0O.html

for(const key in localdata){
    if(vue_history.localDataObj.hasOwnProperty(key)){
        vue_history.localDataObj[key] += recv['localdata'][key];
    }
    else{
        vue_history.localDataObj[key] = recv['localdata'][key];
    }
}

6. 为什么elementui中 v-loading失效

检查下ajax中 async 是否为false
当使用false时,页面直接卡住等待,直到完成(非异步方式)loading自然也就不生效了!!!!!!

这次没有代码哦!被自己蠢死了!

7. elementui使用树形结构时自定义内部显示内容

使用slot-scope即可,有机会要学一下slot-scope的详细用法,自己想办法写一次

<el-tree ref="cargoDataTree" :data="allCargoDataTree" show-checkbox node-key="id" >
    <span class="custom-tree-node" slot-scope="{ node, data }" style="width:100%;" >
        <span>{{ node.label }}</span>
    </span>
</el-tree>

8. elementui-Pagination 分页组件修改位置固定

不知道为啥,外部套上一个width会导致定位偏移

<div style="position:absolute;height:50px;top:545px;right:0px;">
    <el-pagination layout="prev, pager, next" :current-page="currentPage" :page-size="pageSize" @current-change="handleCurrentChange" :page-count="pageCount" >
    </el-pagination>
</div>

9. elementui form 动态增加表单

注意,若需要用rule校验,:key="item.port" 必须设置成item的一个存在的键!!!!并保证prop参数唯一
:key="item.key"

                :prop="'listPorts.' + index + '.value'"
                :rules="{ required: true, message: 'Please input server port', trigger: 'blur'}">

<div class="cargo-label-form">
    <el-form :model="CargoForm" ref="CargoForm" label-width="80px" inline="true" v-for="(item, index) in CargoForm.ConsignerPrice" >   
        <el-form-item 
            
            :prop="'ConsignerPrice.' + index + '.ConsignerID'" 
            label="客户"
            :key="item.index"
            :rules="{
                required: true, message: '客户不能为空', trigger: 'blur'
            }"
        >
            <el-select filterable v-model="item.ConsignerID" placeholder="请选择客户" style="width: 120px;" size="mini">
                <el-option
                    v-for="id in ConsignerList"
                    :key="id.ConsignerID"
                    :label="id.ConsignerNameA"
                    :value="id.ConsignerID">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item
            :prop="'ConsignerPrice.' + index + '.Price'" 
            label="计费件数"
            :key="item.index"
            :rules="{
                required: true, message: '折算计费件数不能为空', trigger: 'blur'
            }"
        >
            <el-input v-model="item.Price" style="width: 50px;" size="mini"></el-input>
            <el-button size="mini"   @click.prevent="removeLine(index)" >删除</el-button>
            <el-button size="mini" @click="addLine" v-if="CargoForm.ConsignerPrice[index+1] == undefined">新增</el-button>
        </el-form-item>
    </el-form>
</div>
removeLine(index){
    if(vue_cargoadd.CargoForm.ConsignerPrice.length ==1){
        return;
    }
    vue_cargoadd.CargoForm.ConsignerPrice.splice(index,1); 
},
addLine(){
    vue_cargoadd.CargoForm.ConsignerPrice.push(
    {
        ConsignerID:'',
        Price:'',
    });
},

10. elementui table 动态可编辑表格

<el-table ref="tmpCargoTable" v-loading="tableloading" style="border: #a6a6a6 1px solid;" 
:row-style="rowstyle" 
:data="cargoTableData" 
height="100%" border 
size="mini" 
empty-text="暂无数据" 
highlight-current-row
@row-click="handleRowClick"
:cell-style="cellstyle" 
:header-row-style="headerrowstyle" 
:header-cell-style="headercellstyle"
@cell-click="carogTableCellClick">
    <el-table-column prop="CargoName" label="货物名称" align="center">
    </el-table-column>
    <el-table-column prop="CargoModel" label="规格型号" align="center">
    </el-table-column>
    <el-table-column prop="CargoUnit" label="单位" align="center">
    </el-table-column>
    <el-table-column prop="CargoVolume" label="单位体积(M³)" width="120"  align="center">
    </el-table-column>
    <el-table-column prop="CargoWeight" label="单位重量(KG)" width="120"  align="center">
    </el-table-column>
    <el-table-column prop="CargoCount" label="数量" width="120"  align="center">
        <template slot-scope="scope">
            <el-input
                v-if="scope.row.editable"
                v-model="scope.row.CargoCount"
                style="width: 100%;height:100%"
                size="mini"
                ref="CargoCountInput"
                @blur="handleEditCargoNum(scope)"
            />
            <span v-else>{{ scope.row.CargoCount }}</span>
        </template>
    </el-table-column>
</el-table>
carogTableCellClick(row, column, cell, event){
    if(column.label == "数量"){
        
        this.$set(row, 'editable', true);
        this.$nextTick(() => {
            this.$refs.CargoCountInput.focus()//显示文本框并获取焦点
        })
    }
},
//失去焦点后固化数据
handleEditCargoNum(scope){
    // console.log(scope.row);
    this.$set(scope.row, 'editable', false);
},

11. elementui 修改绑定内置方法，加入新的参数

// 例如修改checkbox触发的事件，调整入参
 @change="setLimitPublic"
 @change="(val)=>{setLimitPublic(val, 2)}"
···

##12. elementui select框 代码选择并自动触发change事件

vue_tranroad.$refs.DeliverTypeChoose.value = "0";//也可以vue设置绑定值吧
vue_tranroad.$refs.DeliverTypeChoose.$emit('change');

##11. vue3 elementui menu 使用route.push 后 页面跳转但是menu 高亮没变

<el-menu :default-active="router.currentRoute.value.path" :router="true" mode="horizontal"

    background-color="var(--bg-head-bar)"
    text-color="#fff"
    active-text-color="#ff862d">

import { useRouter } from 'vue-router'
const router = useRouter()
···