Scenes
The effect is as follows
Note:
Blog:
https://blog.csdn.net/badao_liumang_qizhi
Pay attention to the public account
domineering programmer
Get programming-related eBooks, tutorial pushes, and free downloads.
accomplish
First add an el-table to the page, and then bind its data source to bcglXiangXiList,
and through
<el-table-column type="selection" width="30" align="center" />
Added tick boxes.
Then set its checkbox change event via @selection-change="handleDetailSelectionChange.
The data source bcglXiangXiList here should be declared in advance
data() {
return {
//Detailed list
bcglXiangXiList: [],Each column here is a different control, but ultimately there must be v-mode for dynamic data binding.
<el-table
v-loading="loading"
:data="bcglXiangXiList"
:row-class-name="rowClassName"
@selection-change="handleDetailSelectionChange"
ref="tb"
>
<el-table-column type="selection" width="30" align="center" />
<el-table-column label="serial number" align="center" prop="xh" width="50"></el-table-column>
<el-table-column label="Starting time/earliest time-End Time/latest time" width="250" prop="sjfw">
<template slot-scope="scope">
<el-time-picker
is-range
format="HH:mm"
value-format="HH:mm"
:style="{width: '100%'}"
start-placeholder="Starting time"
end-placeholder="End Time"
range-separator="to"
clearable
@change="changesjfw(scope.row)"
v-model="bcglXiangXiList[scope.row.xh-1].sjfw"
></el-time-picker>
</template>
</el-table-column>
<el-table-column label="specified number of days" align="center" prop="ts" width="150">
<template slot-scope="scope">
<el-select
clearable
@change="changezdts(scope.row)"
v-model="bcglXiangXiList[scope.row.xh-1].ts"
>
<el-option
v-for="dict in zdtsOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="Check-in location" align="center" prop="dkdd" width="150">
<template slot-scope="scope">
<el-select
clearable
@change="changedkdd(scope.row)"
v-model="bcglXiangXiList[scope.row.xh-1].dkdd"
>
<el-option
v-for="dict in dkddOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="Minimum downhole accumulated time-Maximum downhole accumulated time" width="250" prop="jxsjfw">
<template slot-scope="scope">
<el-time-picker
is-range
format="HH:mm"
value-format="HH:mm"
:style="{width: '100%'}"
start-placeholder="Starting time"
end-placeholder="End Time"
range-separator="to"
clearable
@change="changejxsjfw(scope.row)"
v-model="bcglXiangXiList[scope.row.xh-1].jxsjfw"
></el-time-picker>
</template>
</el-table-column>
</el-table>The data source here is an array, so each bound row is an object. How to correspond each row with the database source?
First how to implement the serial number field of the first column.
Here by setting the el-table
:row-class-name="rowClassName"
to implement, where rowClassName is the callback function.
So you need to implement rowClassName in the function
rowClassName({ row, rowIndex }) {
//Put the index of each row into row.id
row.xh = rowIndex + 1;
},where row is the row object and rowindex is the row number, starting from 0.
So in this way, the serial number (xv attribute) can be incremented and the value is the row number plus 1.
Then how to achieve the check box radio selection?
By setting the el-table
@selection-change="handleDetailSelectionChange"
to fulfill
In the corresponding implementation method handleDetailSelectionChange
//radio button data
handleDetailSelectionChange(selection) {
if (selection.length > 1) {
this.$refs.tb.clearSelection();
this.$refs.tb.toggleRowSelection(selection.pop());
} else {
this.checkedDetail = selection;
}
},The section here is originally an array of selected items when multiple selections are made. Here, the el-table is obtained through this.$refs.tb, but this el-table must be set in advance
ref="tb"
Then judging that the length of the selected array is greater than 1, empty it and select the current row, otherwise, assign the currently selected value to checkedDetail,
So you need to declare checkedDetail in advance
//Selected data from table checkedDetail: [],
In this way, after binding the data source to this el-table above
through something like
v-model="bcglXiangXiList[scope.row.xh-1].ts"
This is used for dynamic data binding.
Implement a new line
Add button
<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddDetails">Add to</el-button>
In the click event corresponding to the new button
handleAddDetails() {
if (this.bcglXiangXiList == undefined) {
this.bcglXiangXiList = new Array();
}
let obj = {};
obj.ts = "1";
obj.dkdd = "1";
obj.sjfw = ["07:00","07:30"];
obj.jxsjfw = ["06:00","12:00"];
this.bcglXiangXiList.push(obj);
},First, determine whether the data source is undefined, because it will be set to undefined when it is emptied, so it needs to be recreated.
Then construct an object and assign a value. Add this object to the data source bcglXiangXiList.
Implement delete a row
The check event has been rewritten before, and the checked content is stored in checkedDetail after checking.
Therefore, before deleting, you can judge whether a line is selected by judging its length.
delete row button
<el-button type="success" icon="el-icon-delete" size="mini" @click="handleDeleteDetails" >delete</el-button>
Then in the event corresponding to the delete button
handleDeleteDetails() {
if (this.checkedDetail.length == 0) {
this.$alert("Please select the data to delete first", "hint", {
confirmButtonText: "Sure",
});
} else {
this.bcglXiangXiList.splice(this.checkedDetail[0].xh - 1, 1);
}
},Here, first determine whether a row has been selected, if a row is selected after
You can get the index of the current row through this.checkedDetail[0].xh -1 of the stored selected item, and this index just corresponds to the index in the data source.
Then delete this piece of data in the data source to delete a row.
The splice method is to start from the first index parameter and delete the elements of the second parameter.
clear all lines
clear button
<el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteAllDetails" >empty</el-button>
Clear the event corresponding to the button
handleDeleteAllDetails() {
this.bcglXiangXiList = undefined;
},Just set the data source to undefined.