实现点击按钮新增数据表格
需求描述：点击添加表格按钮实现表格的新增，同时提供删除按钮可删除当前表格，也可上移或下移当前表格
实现效果：
代码：
TaskTable组件代码
<template>
<div class="task_table">
<div class="task_table_title">
{
{ title.title }}
</div>
<div class="task_info">
<div class="task_info_header">
<el-select v-model="taskType" placeholder="请选择任务类型" clearable>
<el-option
v-for="item in taskTypeArr"
:key="item.code"
:label="item.value"
:value="item.code"
>
</el-option>
</el-select>
<el-button
type="primary"
class="ml10"
size="small"
icon="el-icon-plus"
:disabled="!taskType"
@click="createTask(title)"
>生成任务</el-button
>
</div>
<div class="task_info_content mt10">
<RenderTable
:data="taskTableData"
:options="taskOptions"
style="width: 95%; margin-bottom: 3%"
/>
</div>
</div>
<div class="item_option_delete">
<el-button
type="text"
icon="el-icon-top"
size="medium"
class="move_btn"
@click.stop="handelMoveTaskTable('upMove', title)"
:disabled="title.title_id === 0"
></el-button>
<el-button
type="text"
icon="el-icon-bottom"
size="medium"
class="move_btn"
@click.stop="handelMoveTaskTable('downMove', title)"
:disabled="title.title_id === len - 1"
></el-button>
<el-button
type="text"
icon="el-icon-delete"
size="medium"
circle
@click.stop="handelDeleteTaskTable(title)"
></el-button>
</div>
</div>
</template>
<script>
import {
RenderTable } from "@/shared/index";
export default {
name: "TaskTable",
components: {
RenderTable },
props: {
//表格数据
taskTableData: {
type: Array,
default: () => [],
},
//表格配置，包含表头
taskOptions: {
type: Array,
default: () => [],
},
//任务类型下拉框
taskTypeArr: {
type: Array,
default: () => [],
},
//表格前面的名字，如任务1，任务2
title: {
type: Object,
default: () => {
},
},
//循环表格的数组长度，来控制最后一个表格不可下移操作
len: {
type: Number,
default: () => 0,
},
},
data () {
return {
taskType: "",
};
},
watch: {
taskTableData (newVal) {
if (newVal) {
this.taskTableData = newVal;
}
},
},
methods: {
// 点击生成任务按钮
createTask (val) {
const row = {
taskType: this.taskType, title_id: val.title_id };
this.$emit("creatTask", row);
this.taskType = ""
},
//点击删除表格
handelDeleteTaskTable (row) {
this.$confirm("确定要删除吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
// 删除任务
this.$emit("deleteTaskTable", row);
})
.catch((error) => {
return error;
});
},
//对表格进行上移下移操作
handelMoveTaskTable (type, row) {
const param = {
type: type, title_id: row.title_id };
if (type === "upMove") {
console.log("点击上移", row);
this.$emit("moveTaskTable", param);
} else {
console.log("点击下移", row);
this.$emit("moveTaskTable", param);
}
},
},
};
</script>
<style lang="scss" scoped>
// 任务列表
.task_table {
display: flex;
width: 85%;
border: 1px solid #e4e4e4;
align-items: center;
margin-top: 2%;
.task_table_title {
width: 30px;
font-size: 14px;
line-height: 20px;
padding: 0 30px 0 10px;
}
.task_info {
width: 99%;
padding: 10px 10px 0 10px;
border-right: 1px solid #e4e4e4;
border-left: 1px solid #e4e4e4;
.basic_top {
line-height: 40px;
}
}
.item_option_delete {
padding: 0 5px;
display: flex;
flex-direction: column;
.el-button + .el-button {
margin-left: 0;
}
}
}
// ::v-deep .move_btn .el-icon-top {
// padding: 2px 1px 0 0;
// border: 1px solid;
// border-radius: 50%;
// }
</style>
branchTableArry是个数组，里面的每一个item都是循环的一个表格
<template v-if="branchTableArry.length > 0">
<TaskTable
v-for="(item, index) in branchTableArry"
:key="'branch_' + index"
:taskOptions="taskOptions"
:taskTypeArr="taskTypeArr"
:len="branchTableArry.length || 0"
@deleteTaskTable="deleteTaskTable"
@moveTaskTable="moveTaskTable"
:title="{ title: '任务' + (index + 1), title_id: index }"
></TaskTable>
</template>
<el-button
class="add_btn"
icon="el-icon-plus"
@click="createMainTask()"
>添加表格</el-button
>
//添加表格按钮
createMainTask(){
// flage在data中定义默认是0，
this.branchTableArry.push({
branchtask: "branchtask" + this.flage });
++this.flage;
}
//删除表格
deleteTaskTable (row) {
//row拿到的是当前表格的信息，title_id是当前第几个表格
console.log(this.branchTableArry);
this.branchTableArry.splice(row.title_id - 1, 1);
},
//表格上移下移操作
moveTaskTable (row) {
// 获取当前点击的元素数据
const now_arr = this.branchTableArry[row.title_id];
// 点击上移
if (row.type === "upMove") {
// 获取上一个元素下标和数据
const pre_index = row.title_id - 1;
const pre_data = this.branchTableArry[pre_index];
// 交换数据
const exchange_predata = pre_data;
this.branchTableArry[pre_index] = now_arr;
this.branchTableArry[row.title_id] = exchange_predata;
// 点击下移
} else if (row.type === "downMove") {
// 获取下一个元素下标和数据
const next_index = row.title_id + 1;
const next_data = this.branchTableArry[next_index];
// 交换数据
const exchange_nextdata = next_data;
this.branchTableArry[next_index] = now_arr;
this.branchTableArry[row.title_id] = exchange_nextdata;
}
},