vue+element实现可编辑表格
vue+element实现可追加数据可编辑的表格
template部分:
<el-main style="width: -webkit-fill-available">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="auto" class="demo-ruleForm" style="
justify-items: stretch;
justify-content: space-between;
display: grid;
margin-left: auto;
margin-right: auto;
width: fit-content;
">
<el-row>
<el-col :span="8">
<el-form-item label="考题类型" prop="questionType" size="small" class="formbox_item">
<el-select class="autoSelect" size="small" @change="noChoice" v-model="ruleForm.questionType"
placeholder="请选择">
<el-option v-for="item in questionTypes" :key="item.value" :label="item.label" :value="item.value">
el-option>
el-select>
el-form-item>
el-col>
<el-col :span="8">
<el-form-item label="排序" label-width="50px" prop="order" size="small" class="formbox_item">
<el-input class="autoInput" size="small" type="number" v-model="ruleForm.order" placeholder="填写数字"
autocomplete="off">el-input>
el-form-item>
el-col>
<el-col :span="8">
<el-form-item label="是否启用" prop="questionEnable" size="small" class="formbox_item" style="margin-left: 2px">
<el-radio-group style="width: 100px" v-model="ruleForm.questionEnable">
<el-radio :label="true">启用el-radio>
<el-radio :label="false">禁用el-radio>
el-radio-group>
el-form-item>
el-col>
el-row>
<el-row>
<el-col :span="24">
<el-form-item style="margin-right: 5px" label="考题内容" prop="textA" size="small" class="formbox_item">
<el-input type="textarea" :rows="2" :cols="60" placeholder="请输入内容" v-model="ruleForm.textA">
el-input>
el-form-item>
el-col>
el-row>
<el-row>
<el-col :span="24">
<el-form-item style="margin-right: 5px" label="考题描述" prop="titleDescribe" size="small" class="formbox_item">
<el-input type="textarea" :rows="2" :cols="60" placeholder="请输入内容" v-model="ruleForm.titleDescribe">
el-input>
el-form-item>
el-col>
el-row>
el-form>
<div v-if="noChoicee">
<el-button size="mini" round type="primary" icon="el-icon-circle-plus-outline" @click="addTemp">新增选项el-button>
<div class="tempList">
<el-form :model="formQ" ref="formQ" :rules="formQ">
<el-table height="100%" class="template-list" :data="tempList" style="width: 130%">
<el-table-column align="center" label="选项" size="small">
<template slot-scope="scope">
<div v-if="!scope.row.editing">
<span>{{ scope.row.questionAnswerTitle }}span>
div>
<div v-else>
<el-input class="smallInput" size="mini" v-model="scope.row.questionAnswerTitle" placeholder="请填写选项">
el-input>
div>
template>
el-table-column>
<el-table-column align="center" label="分值" size="small">
<template slot-scope="scope">
<div v-if="!scope.row.editing">
<span>{{ scope.row.answerScore }}span>
div>
<div v-else>
<el-input class="smallInput" size="mini" type="number" v-model="scope.row.answerScore"
placeholder="请填写分值">el-input>
div>
template>
el-table-column>
<el-table-column align="center" label="排序" size="small">
<template slot-scope="scope">
<div v-if="!scope.row.editing">
<span>{{ scope.row.alwaysIndex }}span>
div>
<div v-else>
<el-input class="smallInput" type="number" size="mini" v-model="scope.row.alwaysIndex"
placeholder="请填写排序">el-input>
div>
template>
el-table-column>
<el-table-column width="100" align="center" label="操作" size="small">
<template slot-scope="scope">
<div class="operate-groups">
<el-button size="mini" type="text" icon="el-icon-delete" style="color: #f56c6c"
@click="handleDelete(scope.$index, scope.row)">删除
el-button>
div>
template>
el-table-column>
el-table>
el-form>
div>
div>
<div style="margin-left: auto; margin-right: auto; width: fit-content">
<el-button size="small" @click="resetForm()">返回el-button>
<el-button type="primary" size="small" @click="submitForm()" style="margin-top: 8px">保存el-button>
div>
el-main>
data部分：
questionStates: [
{ value: true, label: '启用' },
{ value: false, label: '禁用' }
],
tempList: [{ editing: true }, { editing: true }, { editing: true }, { editing: true }],
projectChoiceAnswerVOS: {
answerScore: '',
questionAnswerTitle: '',
alwaysIndex: ''
},
tableData: [],
questionTypes: [
{ value: 'SingletonRadio', label: '单选' },
{ value: 'MultipleRadio', label: '多选' },
{ value: 'Text', label: '简答' }
],
ruleForm: {
questionEnable: true,
order: '',
textA: '',
questionType: '',
titleDescribe: ''
},
rules: {
'tempList[${index}].questionAnswerTitle': [{ required: true, message: '请填写', trigger: 'blur' }],
tempList: [{ required: true, message: '不能为空', trigger: 'blur' }],
questionType: [{ required: true, message: '请选择', trigger: 'change' }],
order: [{ required: true, message: '请填写', trigger: 'blur' }],
// titleDescribe: [{ required: true, message: '请填写', trigger: 'blur' }],
textA: [{ required: true, message: '请填写', trigger: 'blur' }]
},
noChoicee: true
js部分:
noChoice() {
if (this.ruleForm.questionType === 'Text') {
this.noChoicee = false
this.tempList = [{ editing: true }, { editing: true }, { editing: true }, { editing: true }]
}
if (this.ruleForm.questionType === 'SingletonRadio' || this.ruleForm.questionType === 'MultipleRadio') {
this.noChoicee = true
}
},
//-----------------------------------------
// 上下自由调整表格数据
swapItems(arr, index1, index2) {
arr[index1] = arr.splice(index2, 1, arr[index1])[0]
return arr
},
// 编辑
handleEdit($index, row) {
this.$set(this.tempList[$index], 'editing', true)
},
// 保存
handleSave($index, row) {
this.$set(this.tempList[$index], 'editing', false)
localStorage.setItem('tempList', JSON.stringify(this.tempList))
},
// 取消
handleCancel($index, row) {
this.$set(this.tempList[$index], 'editing', false)
},
// 新增一条模板数据
addTemp() {
this.tempList = this.tempList || []
this.tempList.push({
questionAnswerTitle: '',
answerScore: '',
alwaysIndex: '',
editing: true
})
},
// 删除
handleDelete($index, row) {
this.$confirm('确认删除此选项?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.tempList.splice($index, 1)
localStorage.setItem('tempList', JSON.stringify(this.tempList))
this.$message({
type: 'success',
message: '删除成功!'
})
})
.catch((err) => {
this.$message({
type: 'warning',
message: '取消删除'
})
})
},
// //关闭弹框的事件
// closeDialog() {
// this.$refs.ruleForm.resetFields();
// },
//提交
submitForm() {
var _this = this
_this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.axios['zssr-server-question-bank']
.post('', JSON.stringify({})
)
.then(function (res) {
if (res.code == '200') {
_this.closeThis()
_this.EventBus.$emit('reload')
_this.$message({
message: '题目创建成功',
type: 'success'
})
}
})
.catch(function (err) {
console.log(err)
})
} else {
console.log('error submit!!')
return false
}
})
},
resetForm() {
// this.EventBus.$emit("closeCreate");
this.$nextTick(() => {
this.$refs.ruleForm.resetFields()
})
},
closeThis() {
console.log(1)
this.$emit('closeCreate')
this.$nextTick(() => {
this.$refs.ruleForm.resetFields()
})
}