102 lines
2.1 KiB
Vue
102 lines
2.1 KiB
Vue
<template>
|
|
<el-form
|
|
ref="form"
|
|
:model="value"
|
|
:label-width="labelWidth + 'px'"
|
|
:disabled="disabled"
|
|
>
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item
|
|
:label="title + ':'"
|
|
:prop="fieldKey"
|
|
:rules="[
|
|
{
|
|
required: true,
|
|
type: 'array',
|
|
message: '请输入并添加',
|
|
trigger: 'change',
|
|
},
|
|
]"
|
|
>
|
|
<el-row type="flex" justify="space-between">
|
|
<el-col :span="20">
|
|
<el-input v-model="dataVal" :placeholder="placeholder"></el-input>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-button type="primary" @click="keyWordAdd">添加</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
<div class="e_tag">
|
|
<el-tag
|
|
v-for="(tag, index) in this.value[fieldKey]"
|
|
:key="index"
|
|
closable
|
|
@close="handleFieldClose(fieldKey, index)"
|
|
>
|
|
{{ tag }}
|
|
</el-tag>
|
|
</div>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</template>
|
|
<script>
|
|
import { industry } from "@/api/config";
|
|
export default {
|
|
props: {
|
|
value: Object,
|
|
labelWidth: {
|
|
type: Number,
|
|
default: 120,
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
fieldKey: {
|
|
require: true,
|
|
type: String,
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
dataVal: "",
|
|
};
|
|
},
|
|
methods: {
|
|
keyWordAdd() {
|
|
if (!this.dataVal.length)
|
|
return this.$message.error("请输入" + this.title);
|
|
this.value[this.fieldKey].push(this.dataVal);
|
|
this.dataVal = "";
|
|
},
|
|
handleFieldClose(val, index) {
|
|
this.value[val].splice(index, 1);
|
|
},
|
|
submitForm() {
|
|
let flag = false;
|
|
this.$refs["form"].validate((valid) => {
|
|
flag = valid;
|
|
});
|
|
return flag;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.e_tag {
|
|
.el-tag {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
</style> |