效果图
<!-- template -->
<!-- 表格 -->
<el-table :data="tableData" border style="width: 100%">
<el-table-column
v-for="(th, index) in tableColumnList"
:key="index"
v-if="showThList.includes(th.prop)"
:prop="th.prop"
:label="th.label"
:width="th.width || '160px'"
>
<template slot-scope="scope">
<!-- 不可修改 -->
<div v-if="th.type === 1">
{{ scope.row[th.prop] }}
</div>
<!-- 可修改 -->
<div v-else>
<!-- 文本 -->
<div v-if="th.type === 2">
<span
class="span-txt"
@dblclick="edit(scope.row, scope.$index)"
v-if="!scope.row.edit"
>
{{ scope.row[th.prop] }}
</span>
<el-input
v-model="scope.row[th.prop]"
type="text"
v-if="scope.row.edit"
></el-input>
</div>
<!-- 单选、多选 -->
<div v-if="[3, 4].includes(th.type)">
<span
class="span-txt"
@dblclick="edit(scope.row, scope.$index)"
v-if="!scope.row.edit"
>
{{ scope.row[th.prop] | getSelectVal(th.option) }}
</span>
<el-select
v-model="scope.row[th.prop]"
v-if="scope.row.edit"
placeholder="请选择"
:multiple="th.type === 4"
>
<el-option
v-for="item in th.option"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</div>
<!-- 日期 -->
<div v-if="th.type === 5">
<span
class="span-txt"
@dblclick="edit(scope.row, scope.$index)"
v-if="!scope.row.edit"
>
{{ scope.row[th.prop] }}
</span>
<el-date-picker
style="width: 100%"
v-model="scope.row[th.prop]"
v-if="scope.row.edit"
type="date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
placeholder="选择日期"
></el-date-picker>
</div>
</div>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="100" align="center">
<template slot-scope="scope">
<el-button
v-if="!scope.row.edit"
@click="edit(scope.row, scope.$index)"
type="text"
size="small"
>
编辑
</el-button>
<el-button
v-else
@click="toSub(scope.row, scope.$index)"
type="text"
size="small"
>
保存
</el-button>
</template>
</el-table-column>
</el-table>
<!-- script -->
data() {
const typeList = () => {
let arr = [
{ id: 1, name: '新签' },
{ id: 2, name: '续费' },
{ id: 3, name: '转介绍' },
]
return arr
} // 类型选项,后面要根据接口获取
return {
queryForm: {
page: 1,
size: 10,
}, // 分页数据
total: 0, // 数据总数
tableData: [
{
id: 1,
number: '学号1111',
studentName: '王小虎',
phone: '上海市普陀区金沙江路 1518 弄',
type: '线上',
source: '1',
source1: [1, 2],
date1: '2021-11-01',
},
{
id: 2,
number: '学号222',
studentName: '王小虎',
phone: '上海市普陀区金沙江路 1517 弄',
type: '线上',
source: '2',
source1: [1, 2],
date1: '2021-11-01',
},
{
id: 3,
number: '学号333',
studentName: '王小虎',
phone: '上海市普陀区金沙江路 1519 弄',
type: '线上',
source: '3',
source1: [1, 2],
date1: '2021-11-01',
},
{
id: 4,
number: '学号444',
studentName: '王小虎',
phone: '上海市普陀区金沙江路 1516 弄',
type: '线上',
source: '1',
source1: [1, 2],
date1: '2021-11-01',
},
{
id: 5,
number: '学号555',
studentName: '王小虎5',
phone: '上海市普陀区金沙江路 1516 弄',
type: '线上',
source: '1',
source1: [1, 2],
date1: '2021-11-05',
},
], // 表格数据
tableColumnList: [
{ prop: 'studentName', label: '学生名称', type: 1 },
{ prop: 'phone', label: '手机号码', type: 1 },
{ prop: 'number', label: '学号', type: 2 },
{ prop: 'type', label: '分类', type: 2 },
{ prop: 'source', label: '来源', type: 3, option: typeList() },
{ prop: 'source1', label: '来源1', type: 4, option: typeList(), },
{ prop: 'date1', label: '报名日期1', type: 5 },
{ prop: 'date2', label: '报名日期2', type: 5 },
{ prop: 'date3', label: '报名日期3', type: 5 },
{ prop: 'date4', label: '报名日期4', type: 5 },
], // 表格列名：prop(String) 列对应的字段； label(String) 列名;type(Number) 类型，1 不可编辑，2 文本，3 单选，4 多选，5 日期；options(Array) 单选和多选类型时对应的options；width(String) 单元格宽度，默认宽为160px； edit(Boolean) 是否在编辑状态，true为正在编辑；
editIndex: '', // 编辑行的下标
thData: [], // 表头数据
showThList: [], // 显示的列 ["studentName", "number", "source", "source1", "date2", "date3", "date4", "date1", "type", "phone"]
}
},
filters: {
// select对应的name进行显示
getSelectVal(val, list) {
let txt = ''
if (Array.isArray(val) && val.length) {
// 多选处理
val.forEach((ids) => {
list.forEach((item) => {
if (item.id == ids) {
txt += `${item.name},`
}
})
})
// 正则去掉最后一个逗号
txt = txt.replace(/,$/gi, '')
} else {
// 单选处理
txt = list.filter((item) => item.id == val)[0].name
}
return txt
},
},
methods: {
// 编辑
edit(row, index) {
// 保存之前没保存的，再编辑新的行
if (this.editIndex !== '' || this.editIndex === 0)
this.toSub(this.tableData[this.editIndex], this.editIndex)
this.editIndex = index
this.$set(this.tableData[index], 'edit', true)
},
// 提交编辑
toSub(row, index) {
console.log('提交编辑--- ', row)
this.$set(this.tableData[index], 'edit', false)
this.editIndex = ''
},
},
