全部代码（复制到空的html即可查看效果）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入elmentui样式 -->
<link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
<!-- 引入elmentui js -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
</head>
<body>
<div id="app">
<div class="top">
<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddDetails">添加</el-button>
<el-button type="success" icon="el-icon-delete" size="mini" @click="handleDeleteDetails">删除</el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteAllDetails">清空</el-button>
</div>
<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>
<el-table-column label="序号" align="center" prop="xh" width="50"></el-table-column>
<el-table-column label="开始时间/最早时间-结束时间/最晚时间" prop="sjfw">
<template slot-scope="scope">
<el-time-picker is-range format="HH:mm" value-format="HH:mm" :style="{ '100%'}" start-placeholder="开始时间"
end-placeholder="结束时间" range-separator="至" clearable @change="changesjfw(scope.row)"
v-model="bcglXiangXiList[scope.row.xh-1].sjfw"></el-time-picker>
</template>
</el-table-column>
<el-table-column label="指定天数" 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="打卡地点" align="center" prop="dkdd">
<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="最小井下累计时间-最大井下累计时间" prop="jxsjfw">
<template slot-scope="scope">
<el-time-picker is-range format="HH:mm" value-format="HH:mm" :style="{ '100%'}" start-placeholder="开始时间"
end-placeholder="结束时间" range-separator="至" clearable @change="changejxsjfw(scope.row)"
v-model="bcglXiangXiList[scope.row.xh-1].jxsjfw"></el-time-picker>
</template>
</el-table-column>
</el-table>
</div>
</body>
<script>
let app = new Vue({
el: '#app',
data() {
return {
loading: false,
//详细list
bcglXiangXiList: [],
//选中的从表数据
checkedDetail: [],
zdtsOptions: [{ dictValue: '1', dictLabel: 1 }, { dictValue: '2', dictLabel: 2 }, { dictValue: '3', dictLabel: 3 }],
dkddOptions: [{ dictValue: '1', dictLabel: '北京' }, { dictValue: '2', dictLabel: '上海' }, { dictValue: '3', dictLabel: '广州' }]
}
},
methods: {
rowClassName({ row, rowIndex }) {
row.xh = rowIndex + 1;
},
//单选框选中数据
handleDetailSelectionChange(selection) {
if (selection.length > 1) {
this.$refs.tb.clearSelection();
this.$refs.tb.toggleRowSelection(selection.pop());
} else {
this.checkedDetail = selection;
}
},
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);
},
handleDeleteDetails() {
if (this.checkedDetail.length == 0) {
this.$alert("请先选择要删除的数据", "提示", {
confirmButtonText: "确定",
});
} else {
this.bcglXiangXiList.splice(this.checkedDetail[0].xh - 1, 1);
}
},
handleDeleteAllDetails() {
this.bcglXiangXiList = undefined;
},
}
})
</script>
<style>
.top {
margin: 20px;
text-align: center;
}
</style>
</html>