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
                }
            },