实现效果如下图：
在前面写了一个 vxe-table的插件，一个基于vue功能强大的表格组件（支持树形，编辑，增删改查以及校验等），也帮到了很多人解决工作中的问题，挺开心的；都说条条大路通罗马，同样的功能有很多实现方式，今天我们就一起看一下利用element-ui的表格和表单结合实现的可编辑表格，主要是记录一下自己用到的知识点，如果可以帮到你，我也很荣幸！
第一步：项目引进element
略，既然看到这里了，想必项目已经引入element-ui,也会怎么做，如果不会可以看 element-ui 官网
第二步：table.vue（可编辑表格）
<template>
<div>
<el-form :model="config" ref="configTableForm">
<el-table
header-row-class-name="header_row_style"
:data="config.list"
style="width: 100%"
max-height="450">
<el-table-column
label="名称"
prop="code"
show-overflow-tooltip
width="80">
</el-table-column>
<el-table-column >
<template slot-scope="scope">
<el-form-item
:prop="'list.'+scope.$index+'.value'">
<el-input
:disabled="scope.row.showType == 3 || scope.row.showType == 4? true : false"
v-model.trim="scope.row.value"
size="mini"
placeholder="请填写值"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column
label="字段类型"
width="120"
show-overflow-tooltip>
<template slot-scope="scope">
{{scope.row.type}}
</template>
</el-table-column>
<el-table-column label="查询名">
<template slot-scope="scope">
<el-form-item
:prop="'list.'+scope.$index+'.name'"
:rules="[
{ required: scope.row.input, message: '不能为空', trigger: 'blur' }]">
<el-input
:disabled="scope.row.input ? false : true"
placeholder="请输入查询名"
v-model.trim="scope.row.name"
:maxlength="20"
size="mini"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="长度" width="100">
<template slot-scope="scope">
<el-input-number
:min="0"
v-model="scope.row.length"
size="mini"
controls-position="right"></el-input-number>
</template>
</el-table-column>
<el-table-column label="描述">
<template slot-scope="scope">
<el-input
placeholder="请输入描述"
v-model.trim="scope.row.memo"
size="mini"></el-input>
</template>
</el-table-column>
<el-table-column label="是否排序" width="100">
<template slot-scope="scope">
<el-select
size="mini"
v-model="scope.row.sort"
@change="showModeChange(scope.row.sort, scope.$index)">
<el-option label="无" value="0"></el-option>
<el-option label="升序" value="1"></el-option>
<el-option label="降序" value="2"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="输入" width="50">
<template slot-scope="scope">
<el-checkbox
v-model="scope.row.input"
></el-checkbox>
</template>
</el-table-column>
<el-table-column width="80">
<template slot="header" slot-scope="scope">
<el-checkbox v-model="AallOutput" @change="handleAllOutput"></el-checkbox>
<span>输出</span>
</template>
<template slot-scope="scope">
<el-checkbox
v-model="scope.row.output"
></el-checkbox>
</template>
</el-table-column>
<el-table-column label="是否必填" width="80">
<template slot-scope="scope">
<el-checkbox
v-model="scope.row.isMust"
:disabled="!scope.row.input"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="展示类型" width="100">
<template slot-scope="scope">
<el-select
size="mini"
:disabled="scope.row.input ? false : true"
v-model="scope.row.showType"
@change="showModeChange(scope.row.showType, scope.$index)">
<el-option label="文本" value="1"></el-option>
<el-option label="数字" value="2"></el-option>
<el-option label="日期" value="3"></el-option>
<el-option label="下拉" value="4" disabled></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="查询方式" width="100">
<template slot-scope="scope">
<el-select
size="mini"
:disabled="scope.row.input ? false : true"
v-model="scope.row.queryType">
<el-option
label="模糊"
value="1"
:disabled="scope.row.displayType == 3 || scope.row.displayType == 4 ? true : false"></el-option>
<el-option
label="精准"
value="2"></el-option>
<el-option
label="区间"
value="3"
:disabled="scope.row.displayType == 1 || scope.row.displayType == 4 ? true : false"></el-option>
</el-select>
</template>
</el-table-column>
</el-table>
</el-form>
<div class="btns">
<el-button
type="primary"
@click="submitConfig('configTableForm')">保存并确定</el-button>
</div>
</div>
</template>
<script>
export default {
data(){
return{
// 配置列表
config: {
list: []
},
}
},
mounted(){
this.getAllColumns()
},
methods:{
// 获取表格数据进行渲染
getAllColumns() {
var data = this.$route.query
getTableDetail(data).then((res) => {
if (res.data.infoCode == 200) {
this.configData = new Array();
for (let i = 0; i < res.data.data.length; i++) {
this.configData.push({
value: res.data.data[i].value || '',
sort:res.data.data[i].sort || '0',
input: res.data.data[i].input || false,
output: res.data.data[i].output || false,
isMust: res.data.data[i].isMust || false,
showType: res.data.data[i].showType || '1',
queryType: res.data.data[i].queryType || '1',
length: res.data.data[i].length,
code: res.data.data[i].columnName,
type: res.data.data[i].udtName || '',
id: res.data.data[i].id,
name: res.data.data[i].name,
memo: res.data.data[i].memo,
apiId: res.data.data[i].apiId,
relName:res.data.data[i].relName || '',
tableSchema:res.data.data[i].tableSchema,
tableName:res.data.data[i].tableName,
});
}
this.$set(this.config, 'list', this.configData);
this.$nextTick(function() {
this.$refs['configTableForm'].clearValidate();
})
} else {
this.$set(this.config, 'list', new Array());
}
}).catch(() => { })
},
//修改表格后提交
submitConfig(formName) {
this.config.list.forEach(e => {
e.apiId = this.id
})
this.$refs[formName].validate((valid) => {
if (valid) {
saveApiColumns(this.config.list).then((res) => {
this.configLoading = false;
if (res.data.infoCode == 200) {
this.$message({
type: 'success',
message: '配置成功'
});
this.$router.back(-1)
} else {
this.$message({
type: 'error',
message: '配置失败！'+res.data.info
});
this.getAllColumns()
}
}).catch(() => {
})
} else {
return false;
}
});
},
}
}
</script>
有点懒，就把自己项目的代码粘贴了一下，可以作为参考！
扫一扫
3526
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
