1. Mesa (el-mesa).
1. Los datos de varias tablas se concatenan y se confunden entre sí.
-
Nota: Cuando hay múltiples tablas en el mismo componente para cambiar entre pestañas y v-if/v-show, los datos de las múltiples tablas se confundirán entre sí y se unirán, causando errores.
-
Solución : Especifique un atributo de clave único y correspondiente para cada tabla .
-
Código central:
<div class="crud__table" v-if="receiverType!=3">
<el-table ref="table"
key="table"
header-row-class-name="crud-table-header"
cell-class-name="crud-table-cell"
row-key="id"
border
stripe
highlight-current-row
height="100%"
style="min-height:405px"
v-loading="loading"
:data="tableData"
>
<el-table-column type="selection" width="45" v-if="receiverType==1"/>
<el-table-column type="index" fixed :index="indexMethod" label="序号" width="50" align='center'/>
<el-table-column label="名称" prop="name" show-overflow-tooltip
:render-header="setTableColumnWidth"/>
<el-table-column label="邮箱" prop="email" :render-header="setTableColumnWidth"/>
<el-table-column label="手机" prop="phoneNo" :render-header="setTableColumnWidth"/>
<el-table-column label="状态" prop="userStateName" :render-header="setTableColumnWidth"/>
</el-table>
</div>
<div class="crud__table" v-if="receiverType==3">
<el-table ref="groupTable"
key="groupTable"
header-row-class-name="crud-table-header"
cell-class-name="crud-table-cell"
border
stripe
highlight-current-row
height="100%"
:max-height="tabelHeight"
style="min-height:405px"
v-loading="loading"
:data="groupTableData">
<el-table-column type="selection" width="45"/>
<el-table-column type="index" fixed :index="indexMethod" label="序号" width="50" align='center'/>
<el-table-column label="名称" prop="name" show-overflow-tooltip :render-header="setTableColumnWidth"/>
<el-table-column label="创建时间" prop="createTime" :render-header="setTableColumnWidth"/>
<el-table-column label="操作" width="290">
<template slot-scope="{row}">
<el-button type="text" @click="openUser(row)">查看用户</el-button>
</template>
</el-table-column>
</el-table>
</div>
复制代码- Ejemplo: la Figura 1 muestra el efecto sin clave; la Figura 2 muestra el efecto con una clave única.
2. Establezca un estado de carga independiente para los botones de operación de cada fila de la tabla.
-
Nota: Cuando los botones de operación (como autorización, eliminación, etc.) de la barra de operaciones de la tabla solicitan la vinculación de la interfaz, agregar un estado de carga relativamente independiente para la operación de cada fila es muy fácil de usar. diseño.
-
Solución : después de que la interfaz extraiga los datos de la tabla y los asigne, configure el control de estado de carga respectivo para cada elemento de los datos de la tabla a través de this.$set(item, 'xxLoading', false);.
-
Código central:
html:
<el-table-column label="操作" width="100">
<template slot-scope="{ row }">
<el-button
v-if="row.status !== 1"
v-loading="row.disposeLoading"
type="primary"
size="small"
@click="dispose(row)"
>处理</el-button
>
</template>
</el-table-column>
js:
//获取列表数据
getList(currentPage = this.currentPage) {
let data = new URLSearchParams();
for (let k in this.search) {
if (this.search[k]) {
data.append(k, this.search[k]);
}
}
}
data.append("current", currentPage);
data.append("size", this.pageSize);
this.loading = true;
API.getList(data)
.then((res) => {
this.loading = false;
if (res.code == 200) {
this.tableData = res.data;
this.total = res.total;
this.currentPage = currentPage;
if(this.tableData && this.tableData.length > 0){
this.tableData.map(i => {
this.$set(i,'disposeLoading',false)
})
}
}
})
.catch((err) => {
this.loading = false;
});
},
//处理
dispose(row) {
let data = new URLSearchParams();
data.append("sn", row.sn);
row.disposeLoading = true;
API.refreshPay(data)
.then((res) => {
row.disposeLoading = false;
if (res.code == 200) {
this.$message({
message: "处理成功！",
type: "success",
showClose: true,
});
this.getList();
} else {
this.getList();
}
})
.catch((err) => {
row.disposeLoading = false;
this.getList();
});
},
复制代码- Ejemplo: la representación es solo para referencia, no es un ejemplo de código.
3. La selección múltiple de tabla de tabla combinada con paginación realiza la función de memoria de la fila seleccionada y realiza la actualización de sincronización dinámica de los datos de la tabla y los datos seleccionados.
-
Nota: En escenarios reales de desarrollo comercial, el-table a menudo tiene la necesidad de mantener la función de memoria de la fila seleccionada antes y después de pasar la página. A continuación se proporciona una idea de solución y un método para este requisito.
-
Solución : use el método de cambio de selección de la tabla del componente del elemento combinado con el componente de paginación para definir uno para almacenar los datos verificados de la página actual y otro para almacenar todos los datos verificados (es decir, los datos verificados son se muestra en el lado derecho. seleccionar datos), y un bit de bandera para lograr.
-
Código central y enlace de explicación : Portal
2. Cuadro de entrada (entrada el).
1.el-input的change、input事件中传递额外参数的实现。
-
说明：el-input的change、input事件都是默认传递了一个参数 -- (value: string | number)。但是很多业务场景，我们都是需要在change、input事件中传递自己定义的额外参数。
-
解决办法：在change、input原有事件中多加一层箭头函数传参即可实现 ---- @change="((val)=>{changeStatus(val, xxx)})"。 (其中，xxx即为所传的自定义参数)。
-
核心代码：
<template>
<div class="about">
<h1>input测试</h1>
<el-input
style="width: 300px; margin-top: 50px"
v-model="value"
clearable
placeholder="请输入内容"
@change="val => changeVal(val,'params')"
></el-input>
</div>
</template>
<script>
export default {
name: "About",
data() {
return {
value: "",
};
},
methods: {
changeVal(val,params){
console.log(val,params);
}
},
};
</script>
复制代码- 实例：图一为默认效果；图二为加了一层箭头函数的效果。
三.选择器（el-select）。
1.el-select的change事件中传递额外参数的实现。
-
说明：el-select的change事件都是默认传递了一个参数 -- （目前的选中值）。但是很多业务场景，我们都是需要在change事件中传递自己定义的额外参数。
-
解决办法：在change原有事件中多加一层箭头函数传参即可实现 ---- @change="((val)=>{changeStatus(val, xxx)})"。 (其中，xxx即为所传的自定义参数)。
2.el-select组件的选择项options数据量过大导致页面卡顿时的处理方法。
-
说明：el-table组件在实际开发中，其内的options选项多为后端接口提供，此时若是数据量庞大（譬如：上万条），那么在用户点开el-select选择器时，会异常卡顿，用户体验感巨差。以下就本需求提供一种解决思路和方法。
-
解决办法：从总options中取出固定条目的小option（renderOption）用于页面渲染，利用el-select提供的
filter-method方法进行搜索过滤，在搜索时用过滤结果更新renderOption。
- 核心代码及讲解链接：传送门
四.日期选择器（el-date-picker）。
1.禁用当前日期之前的日期（只能选择今日到今日之后）。
-
解决：利用el-date-picker的picker-options属性筛选日期。
-
核心代码：
<el-date-picker
type="date"
placeholder="请选择时间"
:picker-options="pickerOptions"
v-model="ruleForm.date"
:clearable="false"
></el-date-picker>
pickerOptions: {
// 限制预约时间
disabledDate(time) {
return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
}
},
复制代码2.只能选择今日到未来某时间段的日期范围（此处以3个月90天为例）。
-
解决：利用el-date-picker的picker-options属性筛选日期。
-
核心代码：
<el-date-picker
type="date"
v-model="ruleForm.date2"
:picker-options="pickerOptions2"
placeholder="请选择完成日期"
:clearable="false"
></el-date-picker>
pickerOptions2: {
// 限制预约时间
disabledDate(time) {
return (time.getTime() < Date.now() - 24 * 60 * 60 * 1000) || (time.getTime() > Date.now() + 90 * 24 * 60 * 60 * 1000)
}
},
复制代码五.表单（el-from）。
1.处理el-from组件在v-if、v-show和自增、自减表单项的时候，会出现表单校验异常或者串项的异常。
-
说明：这里以动态表单为例，处理表单校验异常的情况。
-
解决办法：为每个el-form-item指定对应且唯一的key属性。
-
核心代码：
html:
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="120px"
v-loading="loading"
class="g-form-drawer-main"
>
<template v-for="(item, index) in ruleForm.itemList">
<el-form-item
label="运营商："
:prop="'itemList.' + index + '.carrier'"
:key="item.key"
:rules="{
required: true,
message: '请选择运营商',
trigger: ['blur', 'change'],
}"
>
<div class="p-form-content">
<el-select
class="w-300 umar-r10"
v-model="item.carrier"
placeholder="请选择运营商"
filterable
clearable
>
<el-option
v-for="i in comList"
:key="i.value"
:label="i.label"
:value="i.value"
>
</el-option>
</el-select>
</div>
</el-form-item>
<el-form-item
label="计划套餐："
:prop="'itemList.' + index + '.packageId'"
:key="item.key"
:rules="{
required: true,
message: '请选择计划套餐',
trigger: ['blur', 'change'],
}"
>
<div class="p-form-content">
<el-select
class="w-300 umar-r10"
v-model="item.packageId"
placeholder="请先选择运营商后再选择计划套餐"
filterable
clearable
>
<el-option
v-for="i in item.packageList"
:key="i.packageId"
:label="i.name"
:value="i.packageId"
>
</el-option>
</el-select>
</div>
</el-form-item>
<div class="p-form-content bottom-box">
<el-input
type="textarea"
style="width: 300px"
v-model="item.scene"
placeholder="请输入业务类型"
></el-input>
<el-button
v-show="index === 0"
class="p-el-button addbtn"
type="success"
icon="el-icon-plus"
circle
@click="addProcess"
></el-button>
<el-button
v-show="ruleForm.itemList && ruleForm.itemList.length > 1"
class="p-el-button delbtn"
type="danger"
icon="el-icon-delete"
circle
@click="delProcess(index)"
></el-button>
</div>
</template>
</el-form>
js：
data() {
return {
ruleForm: {
itemList: [
{
carrier: "",
packageId: "",
packageList: [],
key: Date.now() //确保唯一性
},
],
},
comList: [],
rules: {},
};
},
methods: {
//新增
addProcess() {
const process = {
carrier: "",
packageId: "",
packageList: [],
key: Date.now() //确保唯一性
};
this.ruleForm.itemList.unshift(process);
},
//删除
delProcess(index) {
if (this.ruleForm.itemList && this.ruleForm.itemList.length > 1) {
this.ruleForm.itemList.splice(index, 1);
} else {
this.$message({
message: "至少需保留一个",
type: "error",
showClose: true,
});
}
},
复制代码- 实例：图一为未加key值时的效果（校验失常）；图二为加了唯一key的效果（正常）。
- 体会：el-form动态表单，官方的案例是给每一项el-form-item绑定了key值（:key="domain.key"），不过这里有个问题就是domain对象下的key如果是不存在或者是不唯一的，那么就容易造成动态表单各种翻车，所以解决办法就是改写其中的key绑定的值，必须是要存在且唯一性的。
六.分页（el-pagination）。
1.纯前端分页的实现。
-
说明：后台不处理分页,只会在请求的时候一下将所有数据一起返回,这时候就需要前端同学自己处理分页了，这里简述为纯前端分页。
-
解决办法：前端发送请求拿到所有数据 → 对该数据进行处理 → 操作分页组件完成效果。
-
核心代码及讲解链接：传送门