vue及element ui使用過程記錄

標籤

v-show 控制 html顯示

<div  v-show="isShowMServiceImage || isShowFileImage">
.......
</div>

table

vue使用v-html數據太長不換行問題

首先，使用pre標籤pre 元素可定義預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符（例如：\n）。而文本也會呈現爲等寬字體。但是又出現了問題，數據太長會超出，不會換行顯示，加上以下👇樣式：

pre{
    white-space:pre-wrap;
    white-space:-moz-pre-wrap;
    white-space:-pre-wrap;
    white-space:-o-pre-wrap;
   word-wrap:break-word;
}

參考
鏈接：https://www.jianshu.com/p/ee7104961123

表格中參數過長省略並且提示顯示

<el-table-column :show-overflow-tooltip="true">
</el-table-column>

Collapse 摺疊面板如何自定義標題 & 如何設置默認打開的面板

<el-collapse  v-model="activeNames" >
	<el-collapse-item class="deploy-setting">
		<template slot="title">
			<span ></span>
		 </template>
	 </el-collapse-item>
 </el-collapse>

.el-collapse-item__arrow{
	float : left;
	margin-left:5px;
	margin-right:15px;
}

.el-collapse {
     border: 0;
}

.deploy-setting .el-collapse-item__header {
	border-bottom: 1px solid #2C8DF4;
}

.deploy-setting .el-collapse-item__wrap{
	border-bottom:0px;
}

根據相同的值不同列合併成行

                                        <el-table :data="selectedPatchConfig" :span-method="configObjectSpanMethod">
                                            <el-table-column
                                                    prop="typeDesc"
                                                    label="配置類型"
                                                    width="120"
                                                    align="center"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                    prop="configKey"
                                                    label="配置項"
                                                    width="120"
                                                    align="center"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                    prop="detail"
                                                    label="變更內容"
                                                    align="left"
                                            >
                                                <template slot-scope="scope">
                                                    <el-collapse v-show="scope.row.collapse">
                                                        <el-collapse-item class="deploy-setting"  title="非xml方式" >
                                                            <pre style="white-space: pre-wrap">{{scope.row.detail}}</pre>
                                                        </el-collapse-item>
                                                    </el-collapse>
                                                    <p style="white-space: pre-wrap" v-html="scope.row.detail"
                                                         v-show="!scope.row.collapse">
                                                    </p>
                                                </template>
                                            </el-table-column>
                                        </el-table>

configObjectSpanMethod({row, column, rowIndex, columnIndex}) {
                // 重構根據相同的值進行合併，而不是之前的根據 leftCellRowSpan 數據進行處理
                if(columnIndex === 0 ) {
                    const _row = (this.filterData(this.selectedPatchConfig).one)[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col
                    };
                }
                if(columnIndex === 1) {
                    const _row = (this.filterData(this.selectedPatchConfig).two)[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col
                    };
                }

            },
            filterData(arr){
                let spanOneArr = [],
                    spanTwoArr = [],
                    concatOne = 0,
                    concatTwo = 0;
                arr.forEach((item,index)=>{
                    if(index === 0){
                        spanOneArr.push(1);
                        spanTwoArr.push(1);
                    }else{
                        if(item.typeDesc === arr[index - 1].typeDesc){ //第一列需合併相同內容的判斷條件
                            spanOneArr[concatOne] += 1;
                            spanOneArr.push(0);
                        }else{
                            spanOneArr.push(1);
                            concatOne = index;
                        };
                        if(item.configKey === arr[index - 1].configKey&&item.typeDesc === arr[index - 1].typeDesc){//第二列需合併相同內容的判斷條件
                            spanTwoArr[concatTwo] += 1;
                            spanTwoArr.push(0);
                        }else{
                            spanTwoArr.push(1);
                            concatTwo = index;
                        }
                    }
                });
                return  {
                    one: spanOneArr,
                    two: spanTwoArr
                }
            },