1. 手机端固定列影响列合并问题
如图,固定前两列后,表格标题的列合并失效
解决方法
第一步:在el-table中添加 :span-method="objectSpanMethod"
<el-table
class="uptable"
:span-method="objectSpanMethod"
:data="mytableData"
第二步:在objectSpanMethod 方法中重新设置列合并
public objectSpanMethod({ row, column, rowIndex, columnIndex }: any) {
$('.uptable .el-table__fixed-header-wrapper .el-table_1_column_1').attr('colspan','2').css("text-align",'center')
$('.uptable .el-table__fixed-header-wrapper .el-table_1_column_2').css('display','none')
}
2.手机端合计位于第一行后的列排序问题(排序如何去除合计进行排序)
第一步:在el-table中添加 @sort-change="soltHandle"
<el-table
class="customTable"
ref="multipleTable"
:data="tableData"
border
@sort-change="soltHandle"
第二步:在soltHandle 方法中去除合计数据进行排序(数组中第一条数据为合计数据)
public soltHandle(column: any, prop: any, order: any) {
//获取需要排序的字段名称和排序类型
let fieldName = column.prop;
let sortingType = column.order;
if (sortingType === 'ascending') {
let table = this.tableData;
let table2 = table.slice(1,this.tableData.length);
let table1 = table.slice(0,1).concat(table2.sort((a: any, b: any) => a[fieldName] - b[fieldName]))
//升序
this.tableData = table1;
} else if (sortingType === 'descending') {
let table = this.tableData;
let table2 = table.slice(1,this.tableData.length);
let table1 = table.slice(0,1).concat(table2.sort((a: any, b: any) => b[fieldName] - a[fieldName]))
//降序
this.tableData = table1;
}
}
3.el-table-column中嵌套el-form-item并进行校验
<el-form-item
:prop="`tableData.${$index}.input`"
:rules="rules.input"
>
//html部分
<el-form :model="form" label-position="left" label-width="100" ref= "form">
<el-form-item label="其他表单项" prop="name" :rules="rules.name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-table :data="form.tableData" border stripe>
<el-table-column label="该列单元格校验">
<template slot-scope="{ row, $index }">
<el-form-item
:prop="`tableData.${$index}.input`"
:rules="rules.input"
>
<el-input v-model="row.input"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
// data部分
form: {
name: "",
tableData: [
{ input: "" },
{ input: "" },
{ input: "" },
{ input: "" },
{ input: "" }
]
},
rules: {
name: [
{ required: true, trigger: ["blur", "change"], message: "请选择" }
],
input: [
{ required: true, trigger: ["blur", "change"], message: "请选择" }
]
},
4.el-table添加行或删除行
//添加
this.allData.companies_list.push({
contract_name: '',
contract_number: ''
]
})
//删除
deleteReinusranceContract(index, row) {
this.$confirm('确认删除吗', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
center: true
}).then(() => {
this.allData.companies_list.splice(index, 1)
})
}
5.渲染层级太多造成的页面不刷新问题如何解决
先delete再$set
changeCheck(index: any, index1: any) {
var allData = this.allData;
var checked = !allData.companies_list[index].companies[index1].checked;
delete this.allData.companies_list[index].companies[index1].checked;
delete this.allData.companies_list[index].companies[index1].disabled;
this.$set(this.allData.companies_list[index].companies[index1], 'checked', checked)
this.$set(this.allData.companies_list[index].companies[index1], 'disabled', !checked)
}
6.渲染层级太多el-checkbox中v-model 失效如何解决
:value 或 :check
<el-checkbox :disabled="isEdit" :label="radioItem.company_name"
:value="radioItem.checked">
{{ radioItem.company_name}}
</el-checkbox>
<el-checkbox :disabled="isEdit" :label="radioItem.company_name"
:check="radioItem.checked">
{{ radioItem.company_name}}
</el-checkbox>
7. elment支持多选
<el-tooltip effect="dark" placement="right" :disabled="tooltipShow" v-
if="sellChannel=='3'">
<div v-for="(item, index) in newArr" :key="index">{{ item }}</div>
<el-select v-model="bankName" multiple
@change="bankNameChange"
placeholder="请选择" style="width: 396px">
<el-option v-for="(item, index) in bankNameList"
:key="index"
:label="item.enum_name"
:value="item.enum_code"
:disabled="item.disabled">
</el-option>
</el-select>
</el-tooltip>
bankName:any = [''];
bankNameList: any = [];
newArr: any = [];
tooltipShow = true;
bankNameChange(val: any){
this.newArr = [];
let tempArr = this.bankName.slice(3);
if (this.bankName.length > 3) {
tempArr.map((item: any) => {
return item;
});
this.bankNameList.forEach((k: any) => {
tempArr.forEach((q: any) => {
if (q == k.enum_code) {
this.newArr.push(k.enum_name);
}
});
});
this.tooltipShow = false;
} else {
this.tooltipShow = true;
}
if (val[0] == '' && val.length > 1) {
this.bankName.shift();
} else {
val.forEach((item: any, index: number) => {
if (item === '') {
this.bankName = [val[val.length - 1]];
this.tooltipShow = true;
this.newArr = [];
}
});
}
if (this.bankName == '') {
this.bankName = [''];
}
}
productManagedApi.getEnum({ enum_type: 'bankName' }).then((res: any) => {
this.bankNameList = res.data.defmap.reportEnumerates;
this.bankNameList.unshift({ enum_code: '', enum_name: '全部' });
});
// 隐藏两个个之后的所有Tag,并在第三个Tag之前展示...
/deep/ .el-tag.el-tag--info:nth-child(n + 3) {
width: 0;
padding: 0;
height: 0;
margin: 0;
color: rgba(255, 255, 255, 0);
border-color: unset;
background: none;
i {
display: none;
}
}
/deep/ .el-tag.el-tag--info:nth-child(3) {
position: relative;
&:before {
content: '...';
position: absolute;
left: 4px;
top: -12px;
width: 26px;
height: 24px;
padding: 0 8px;
line-height: 22px;
font-size: 12px;
background-color: #f4f4f5;
color: #909399;
box-sizing: border-box;
border: 1px solid #e9e9eb;
border-radius: 4px;
}
}
8. el-table 自适应列宽
说到自适应列宽,网友们肯定会想到使用 插件属性 fit,尝试后发现,fit 只针对表头,不能根据数据内容自动撑开
这里提供一个新思路:将需要自适应列的数据(包含表头)进行长度比较,最长的数据的宽度设置为当前列的宽度
<el-table-column
prop="piecespremium"
label="件均保费(元)"
:formatter="stateFormat"
header-align="center"
align="right"
:width="flexColumnWidth(tableData,'件均保费(元)','piecespremium')"
>
<template slot-scope="scope">
{{ scope.row.piecespremium == '' ? '--' : stateFormat(scope.row.piecespremium) }}
</template>
</el-table-column>
flexColumnWidth(data,label, prop) {
// 1.获取该列的所有数据
const arr = data.map(x => x[prop])
arr.push(label) // 把每列的表头也加进去算
// 2.计算每列内容最大的宽度 + 表格的内间距(依据实际情况而定)
return (this.getMaxLength(arr) + 30) + 'px'
}
getMaxLength(arr) {
return arr.reduce((acc, item) => {
if (item) {
const calcLen = this.getTextWidth(item)
if (acc < calcLen) {
acc = calcLen
}
}
return acc
}, 0)
}
/**
* 使用span标签包裹内容,然后计算span的宽度 width: px
*/
getTextWidth(str) {
let width = 0
const html = document.createElement('span')
html.innerText = str
html.className = 'getTextWidth'
document.querySelector('body').appendChild(html)
width = document.querySelector('.getTextWidth').offsetWidth
document.querySelector('.getTextWidth').remove()
return width
}
.getTextWidth{
font-size: 12px;
}