效果
标识只能是字母数字组合、并且只能以字母开头。
当类型是枚举的时候枚举值设置启用，可输入，其他类型的时候枚举值都禁用。
实现思路
elementUI的原生table组件是不支持编辑的，但是可以在里边自定义元素，给这个列里面加一个input就可以，如下：
<el-table-column
prop="ccaExplain"
label="说明">
<template slot-scope="scope">
<el-form-item :prop="'cdcTypeVal.' + scope.$index + '.ccaExplain'" :rules="rules.ccaExplain">
<el-input v-model="scope.row.ccaExplain" autocomplete="off" size="small"/>
</el-form-item>
</template>
</el-table-column>校验也差不多，上面那个代码也写出来了，就是<el-form-item :prop="'cdcTypeVal.' + scope.$index + '.ccaExplain'" :rules="rules.ccaExplain">
页面代码
<el-form :inline="true" ref="form" :model="form" :rules="rules" label-width="90px" size="small">
<el-button-group style="margin-bottom: 5px">
<el-button size="mini" icon="el-icon-circle-plus-outline" @click="addTableRow">添加</el-button>
</el-button-group>
<el-table
:data="form.cdcTypeVal"
size="mini"
border
style="width: 100%">
<el-table-column
type="index"
width="30">
</el-table-column>
<el-table-column
prop="ccaGuid"
width="100px"
label="标识">
<template slot-scope="scope">
<el-form-item :prop="'cdcTypeVal.' + scope.$index + '.ccaGuid'" :rules="rules.ccaGuid">
<el-tooltip content="只能是数字和字母，并且字母开头！" placement="bottom">
<el-input v-model="scope.row.ccaGuid" autocomplete="off" content="只能是数字和字母，并且字母开头！" size="small"/>
</el-tooltip>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="ccaType"
label="类型">
<template slot-scope="scope">
<el-form-item :prop="'cdcTypeVal.' + scope.$index + '.ccaType'" :rules="rules.ccaType">
<el-select v-model="scope.row.ccaType" placeholder="请选择" size="small" @change="changeCcaType(scope.$index,scope.row)">
<el-option label="文字" value="3"/>
<el-option label="整数" value="1"/>
<el-option label="小数" value="2"/>
<el-option label="枚举" value="4"/>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="ccaLength"
width="100px"
label="长度">
<template slot-scope="scope">
<el-form-item :prop="'cdcTypeVal.' + scope.$index + '.ccaLength'" :rules="rules.ccaLength">
<el-input v-model.number="scope.row.ccaLength" autocomplete="off" size="small"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="ccaExplain"
label="说明">
<template slot-scope="scope">
<el-form-item :prop="'cdcTypeVal.' + scope.$index + '.ccaExplain'" :rules="rules.ccaExplain">
<el-input v-model="scope.row.ccaExplain" autocomplete="off" size="small"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="ccaDefault"
label="默认值">
<template slot-scope="scope">
<el-form-item :prop="'cdcTypeVal.' + scope.$index + '.ccaDefault'" :rules="rules.ccaDefault">
<el-input v-model="scope.row.ccaDefault" autocomplete="off" size="small"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="ccaEnum"
label="枚举值">
<template slot-scope="scope">
<el-form-item :prop="'cdcTypeVal.' + scope.$index + '.ccaEnum'" :rules="rules.ccaEnum">
<el-input v-model="scope.row.ccaEnum" autocomplete="off" size="small" :disabled="scope.row.ccaEnumStatus"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column
width="80px"
label="操作">
<template slot-scope="scope">
<el-form-item>
<el-button size="mini" type="danger" plain @click="delTableRow(scope.$index, scope.row)">删除</el-button>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>js代码
<script>
export default {
name: "Type",
data() {
return {
// 表单参数
form: {
},
// 表单校验
rules: {
ccaGuid: [{
validator:(rule,value,callback)=>{
if(value != ""){
if((/^[a-zA-Z][\da-zA-Z]*$/).test(value) === false){
callback(new Error("不合法！"));
}else{
callback();
}
}else{
callback(new Error("必填！"));
}
},
required: true,
trigger: 'blur'
}],
ccaExplain: [{
required: true,
message: '必填！',
trigger: 'blur'
}],
ccaLength: [
{
validator:(rule,value,callback)=>{
if(value != ""){
if((/^\+?[1-9][0-9]*$/).test(value) === false){
callback(new Error("必须大于0"));
}else{
callback();
}
}else{
callback();
}
},
required: true, trigger: 'blur'},
{ type: 'number', message: '必填！'}
]
}
};
},
methods: {
/** 类型变更 设置枚举值禁用 */
changeCcaType(index, obj) {
if(obj.ccaType === 4 || obj.ccaType === "4"){
this.form.cdcTypeVal[index].ccaEnumStatus = false
}else{
this.form.cdcTypeVal[index].ccaEnumStatus = true
}
},
/** 添加种类类别值 */
addTableRow() {
this.form.cdcTypeVal.push({
ccaGuid: '',
ccaType: '',
ccaLength: 200,
ccaExplain: '',
ccaDefault: '',
ccaEnum: '',
ccaEnumStatus: true
})
},
/** 删除种类类别值 */
delTableRow(index, row) {
var that = this;
this.$confirm('确认删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//点击确定的操作(调用接口)
that.form.cdcTypeVal.splice(index, 1);
}).catch(() => {
//点取消的提示
return;
});
},
// 表单重置
reset() {
this.form = {
cdcTypeVal: []
};
this.resetForm("form");
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
this.getTreeselect();
if (row != null) {
this.form.ctParentCode = row.ctCode;
}
if (row.ctLayer !== 1) {
this.typeValStyle = {
display: 'none'
}
}else{
this.typeValStyle = {
display: ''
}
}
getType(row.ctCode).then(response => {
this.form = response.data;
if (row.ctLayer === 1) {
this.form['cdcTypeVal'] = []
}
this.open = true;
this.title = "修改光盘柜种类";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.ctCode != null) {
updateType(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addType(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
}
}
};
</script>OK，就是这样了
看看内容
看看内