<template>
<el-form
:model="tableForm"
ref="tableForm"
label-width="0px"
class="demo_ruleForm"
>
<el-table
:data="tableForm.tableData"
:span-method="arraySpanMethod"
style="width: 100%"
:header-cell-style="headerCss"
>
<el-table-column label="序号" width="80px">
<template slot-scope="{ row }">
<!-- 编辑状态插入的控件 -->
<div class="edit_box" v-if="row.isEdit">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
<!-- 序号 -->
<span style="padding-left: 24px" v-else>{{
row["column1"].lineNo ? row["column1"].lineNo : ""
}}</span>
</template>
</el-table-column>
<el-table-column
v-for="(column, index) in subTableModel"
:key="index"
:prop="'column' + column.columnNo"
:label="column.name"
>
<template slot-scope="scope">
<!-- 文本类型 -->
<span
v-if="
scope.row['column' + column.columnNo].controlType === 'text' &&
!scope.row.isEdit
"
>
{{ scope.row["column" + column.columnNo].value }}
</span>
<!-- 输入框类型 (有必填校验)-->
<el-form-item
v-if="scope.row['column' + column.columnNo].controlType === 'input'"
:prop="
'tableData.' +
scope.$index +
`.${['column' + column.columnNo]}.value`
"
:rules="[{ required: true, message: '必填', trigger: 'blur' }]"
>
<el-input
size="small"
style="width: 85%"
v-model="scope.row['column' + column.columnNo].value"
></el-input>
</el-form-item>
<!-- 多行文本类型 -->
<el-form-item
v-if="
scope.row['column' + column.columnNo].controlType === 'textarea'
"
:prop="
'tableData.' +
scope.$index +
`.${['column' + column.columnNo]}.value`
"
:rules="[{ required: true, message: '必填', trigger: 'blur' }]"
>
<el-input
type="textarea"
size="small"
style="width: 85%"
v-model="scope.row['column' + column.columnNo].value"
></el-input>
</el-form-item>
<!-- radio单选类型 -->
<el-form-item
v-if="scope.row['column' + column.columnNo].controlType === 'radio'"
:prop="
'tableData.' +
scope.$index +
`.${['column' + column.columnNo]}.value`
"
:rules="[{ required: true, message: '必填', trigger: 'blur' }]"
>
<el-radio-group
class="radio_group"
v-model="scope.row['column' + column.columnNo].value"
>
<el-radio
v-for="item in options"
:key="item.value"
style="height: 25px; line-height: 25px"
:label="item.value"
>{{ item.label }}</el-radio
>
</el-radio-group>
</el-form-item>
<!-- checkbox多选类型 -->
<el-form-item
v-if="
scope.row['column' + column.columnNo].controlType === 'checkbox'
"
:prop="
'tableData.' +
scope.$index +
`.${['column' + column.columnNo]}.value`
"
:rules="[{ required: true, message: '必填', trigger: 'blur' }]"
>
<el-checkbox-group
class="checkbox_group"
v-model="scope.row['column' + column.columnNo].value"
>
<el-checkbox
v-for="item in options"
:key="item.value"
:label="item.value"
style="height: 25px; line-height: 25px"
>{{ item.label }}</el-checkbox
>
</el-checkbox-group>
</el-form-item>
<!-- 单选下拉类型 (有必填校验)-->
<el-form-item
v-if="
scope.row['column' + column.columnNo].controlType === 'select'
"
:prop="
'tableData.' +
scope.$index +
`.${['column' + column.columnNo]}.value`
"
:rules="[{ required: true, message: '必填', trigger: 'blur' }]"
>
<el-select
size="small"
v-model="scope.row['column' + column.columnNo].value"
placeholder="请选择"
style="width: 85%"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<!-- 多选下拉类型 (有必填校验)-->
<el-form-item
v-if="
scope.row['column' + column.columnNo].controlType ===
'multi-select'
"
:prop="
'tableData.' +
scope.$index +
`.${['column' + column.columnNo]}.value`
"
:rules="[{ required: true, message: '必填', trigger: 'blur' }]"
>
<el-select
size="small"
multiple
v-model="scope.row['column' + column.columnNo].value"
placeholder="请选择"
style="width: 85%"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<!-- 时间类型 (有必填校验)-->
<el-form-item
v-if="scope.row['column' + column.columnNo].controlType === 'time'"
:prop="
'tableData.' +
scope.$index +
`.${['column' + column.columnNo]}.value`
"
:rules="[{ required: true, message: '必填', trigger: 'blur' }]"
>
<el-date-picker
v-model="scope.row['column' + column.columnNo].value"
type="datetime"
size="small"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"
style="width: 85%"
>
</el-date-picker>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作" width="280px">
<template slot-scope="scope">
<el-button
type="primary"
size="small"
@click="submitRowForm('tableForm', scope.$index, subTableModel)"
>校验表格每一行</el-button
>
<el-button
type="primary"
size="small"
@click="submitForm('tableForm')"
>校验整个表格</el-button
>
</template>
</el-table-column>
</el-table>
</el-form>
</template>
<script>
export default {
data() {
return {
checked: "",
options: [
{
value: "1",
label: "黄金糕",
},
{
value: "2",
label: "双皮奶",
},
{
value: "3",
label: "蚵仔煎",
},
{
value: "4",
label: "龙须面",
},
{
value: "5",
label: "北京烤鸭",
},
],
subTableModel: [
{ name: "text类型", columnNo: 0 },
{ name: "input类型", columnNo: 1 },
{ name: "textarea类型", columnNo: 2 },
{ name: "radio类型", columnNo: 3 },
{ name: "checkbox类型", columnNo: 4 },
{ name: "select类型", columnNo: 5 },
{ name: "multi-select类型", columnNo: 6 },
{ name: "time类型", columnNo: 7 },
],
subTableList: [
[
{ lineNo: 1, columnNo: 0, controlType: "text", value: "白细胞" },
{
lineNo: 1,
columnNo: 1,
controlType: "input",
value: "",
},
{
lineNo: 1,
columnNo: 2,
controlType: "textarea",
value: "文本框类型1",
},
{ lineNo: 1, columnNo: 3, controlType: "radio", value: "2" },
{ lineNo: 1, columnNo: 4, controlType: "checkbox", value: "1" },
{ lineNo: 1, columnNo: 5, controlType: "select", value: "3" },
{ lineNo: 1, columnNo: 6, controlType: "multi-select", value: "4" },
{
lineNo: 1,
columnNo: 7,
controlType: "time",
value: "2023-04-12 18:00:38",
},
],
[
{ lineNo: 2, columnNo: 0, controlType: "text", value: "黑细胞" },
{
lineNo: 2,
columnNo: 1,
controlType: "input",
value: "输入框类型2",
},
{
lineNo: 2,
columnNo: 2,
controlType: "textarea",
value: "文本框类型2",
},
{ lineNo: 2, columnNo: 3, controlType: "radio", value: "3" },
{ lineNo: 2, columnNo: 4, controlType: "checkbox", value: "2" },
{ lineNo: 2, columnNo: 5, controlType: "select", value: "4" },
{ lineNo: 2, columnNo: 6, controlType: "multi-select", value: "1" },
{ lineNo: 2, columnNo: 7, controlType: "time", value: "" },
],
],
};
},
computed: {
tableForm() {
const tableForm = {};
const tableData = this.subTableList.map((row) => {
// 处理每行的数据格式
let rowData = {};
row.forEach((column) => {
if (
column.controlType === "checkbox" ||
column.controlType === "multi-select"
) {
//将字符串转为数组
column.value = Object.values(column.value);
}
rowData["column" + column.columnNo] = column;
});
this.$set(rowData, "iskkkk", false);
return rowData;
});
// 返回一个处理好的列表
this.$set(tableForm, "tableData", tableData);
return tableForm;
},
},
methods: {
// 表格头部样式
headerCss() {
const headerStyle =
"background:#F2F2F2; color:#333333;border-left: 2px solid #FFFFFF;";
return headerStyle;
},
// 点击修改时,插入一行,并且合并所有的行div
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (row.isEdit) {
if (columnIndex === 0) {
const headerNum = this.subTableModel.length + 2;
return [1, headerNum];
} else if (columnIndex === 1) {
return [0, 0];
}
}
},
// 校验整个表格
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
// 校验表格每一行,并保存
submitRowForm(formName, index, subTableModel) {
const errorList = [];
subTableModel.forEach((item) => {
const value =
"tableData." + index + `.${["column" + item.columnNo]}.value`;
this.$refs[formName].validateField(value, (errorMessage) => {
errorList.push(errorMessage);
});
});
// 全部为空的时候(校验通过,可以进行下一步操作)
if (errorList.every((erro) => erro === "")) {
console.log("可以保存了");
} else {
console.log("不能保存!");
}
},
handleOpearate(row, index) {
if (row.iskkkk) {
row.iskkkk = false;
this.tableForm.tableData.splice(index + 1, 1);
} else {
row.iskkkk = true;
const newRow = JSON.parse(JSON.stringify(row));
this.$set(newRow, "isEdit", true);
this.tableForm.tableData.splice(index + 1, 0, newRow);
console.log(newRow, index);
}
},
},
};
</script>
<style lang="scss" scoped>
.demo_ruleForm {
::v-deep .el-form-item {
margin: 22px 0;
}
::v-deep .el-table td {
position: relative;
}
::v-deep .el-table th > .cell {
padding-left: 24px;
}
.header_img {
float: right;
padding-right: 10px;
img {
cursor: pointer;
margin: 0 4px;
}
}
.checkbox_group,
.radio_group {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 90%;
}
.edit_box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: aquamarine;
}
.operate_box {
display: flex;
justify-content: space-between;
.edit_but_box {
display: flex;
.operation_img {
width: 26px;
height: 26px;
margin-right: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
img {
width: 16px;
height: 16px;
}
&:hover {
border-radius: 3px;
background-color: #e6e5e3;
}
}
}
.checkbox_box {
padding-right: 10px;
::v-deep.el-checkbox__inner {
width: 16px;
height: 16px;
}
::v-deep.el-checkbox__inner::after {
left: 5px;
top: 2px;
}
}
}
}
</style>
VUE2.0表格el-table循环动态列渲染的demo,包含各种控件的必填校验(复杂表单)
于 2023-04-14 16:08:38 首次发布
该代码示例展示了在Vue.js中使用ElementUI的el-form和el-table组件来构建动态表格,包括不同类型的输入控件(文本、输入框、多行文本、单选、多选、下拉等),并实现了行级别的数据校验功能。表格支持编辑模式,具有必填项校验和多种数据类型的操作。
摘要由CSDN通过智能技术生成