<el-button type="primary" icon="el-icon-plus" @click="addRule">新增</el-button>
<el-form :rules="formData.rules" :model="formData" ref="formDom" class="demo-ruleForm">
<el-table :data="formData.deviceThresholdList">
<!-- v-loading="loading" -->
<el-table-column label="序号" align="center" prop="index">
<template slot-scope="scope">
<span>{{scope.$index+1}}</span>
</template>
</el-table-column>
<el-table-column label="阈值" align="center" prop="thresholdStatus">
<template slot-scope="scope">
<el-form-item :prop="'deviceThresholdList.' + scope.$index + '.thresholdStatus'" :rules='formData.rules.thresholdStatus'>
<el-select v-model="scope.row.thresholdStatus">
<el-option v-for="item in thresholdOptions" :key="item.dictValue" :label="item.dictLabel"
:value="item.dictValue"></el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="Value" align="center" prop="vals">
<template slot-scope="scope">
<el-form-item :prop="'deviceThresholdList.' + scope.$index + '.thresholdStatus'" :rules='formData.rules.vals'>
<el-input v-model="scope.row.vals" placeholder="请输入阈值" size="medium"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="颜色" align="center" prop="thresholdColor" width="180">
<template slot-scope="scope">
<el-form-item :prop="'deviceThresholdList.' + scope.$index + '.thresholdColor'" :rules='formData.rules.thresholdColor'>
<el-select v-model="scope.row.thresholdColor">
<el-option v-for="item in thresholdColorList" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="报警内容" align="center" prop="describe" width="180">
<template slot-scope="scope">
<el-form-item :prop="'deviceThresholdList.' + scope.$index + '.describe'" :rules='formData.rules.describe'>
<el-input type="textarea" v-model="scope.row.describe" :autosize="{minRows: 1,maxRows: 3}"
placeholder="请输入报警内容" size="medium"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-tooltip class="item fs-20" effect="dark" content="删除" placement="top-start">
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.$index,scope.row)"></el-button>
<!-- v-hasPermi="['system:house:remove']" -->
</el-tooltip>
</template>
</el-table-column>
</el-table>
</el-form>
export default {
data() {
return {
thresholdOptions: [{
dictLable:'测试',dictValue:'1'}], //阈值字典设置
thresholdColorList: [{
label: '碧绿色',
value: '#7FFFAA'
},
{
label: '海洋绿',
value: '#2E8B57'
},
{
label: '卡其布',
value: '#F0E68C'
},
{
label: '秋麒麟',
value: '#DAA520'
},
{
label: '橙红色',
value: '#FF4500'
},
{
label: '纯红',
value: '#FF0000'
},
{
label: '深灰色',
value: '#A9A9A9'
},
{
label: '深天蓝',
value: ' #00BFFF'
}
],
formData: {
rules: {
thresholdStatus: {
required: true,
message: "必选字段",
trigger: "change"
},
describe: {
required: true,
message: "必填字段",
trigger: "blur"
},
vals: {
required: true,
message: "必填字段",
trigger: "blur"
},
thresholdColor: {
required: true,
message: "必须字段",
trigger: "change"
}
},
//阈值table
deviceThresholdList: [{
thresholdStatus: '1', //阈值
describe: '', //报警内容
thresholdColor: '', //颜色
vals: '' //值
}]
}
}
}
},
methods: {
/**规则新增*/
addRule() {
var newValue = {
thresholdStatus: '0', //阈值
describe: '', //报警内容
thresholdColor: '', //颜色
vals: '' //值
}
//添加新的行数
this.formData.deviceThresholdList.push(newValue);
},
/**规则删除*/
handleDelete(index) {
this.formData.tableData.splice(index, 1)
},
}
}
element table下input v-model绑定数据并动态新增
最新推荐文章于 2024-06-14 10:49:40 发布