基于element ui 实现编辑表格，支持文本、下拉、日期、链接等形式，实现了回车到下一个输入框，每一个回车都可以触发业务回车事件，例如计算小计；最后一格回车可以触发自动增行等效果。
实现效果如下
组件入口 index.vue
<template>
<my-form :model="tableDataTmp" ref="tableForm" class="edit-table-dialog" @submit.native.prevent :class="{'edit-table-disabled': disabled}">
<el-row justify="end" type="flex">
<div class="title-tag" v-if="title">{{ title }}</div>
<slot name='btn-more-before'></slot>
<el-button type="primary" plain size="small" icon="el-icon-plus" @click="addRow" v-if="!disabled && (options.showAddBtn==undefined || options.showAddBtn==null || options.showAddBtn)">新增行</el-button>
<el-button type="primary" plain size="small" icon="el-icon-delete" @click="deleteRow" v-if="!disabled && (options.showDelBtn==undefined || options.showDelBtn==null || options.showDelBtn)">删除行</el-button>
<slot name="btn-more"></slot>
</el-row>
<el-table ref="editTableRef" border :data="tableDataTmp.tableData" row-key="__rowKey" @selection-change="selectionChange" @select="handleSelect" class="edit-table" :row-class-name="tableRowClassName" :height="height" empty-text=" ">
<template v-for="item in columnData">
<column ref="columnRef" :key="item.label" :columnInfo="item" :options="options" :tableRules="tableRules" :rowKey="rowKey" :defaultShowEdit="defaultShowEdit"
:selectList="selectList" :isDiff="isDiff" :disabled="disabled" :editIndex="editIndex" @editFocus="editFocus" @keyupEnter="keyupEnter" @onfocus="onfocus" @link="clickLink"></column>
</template>
</el-table>
<table-dialog ref="tableDialogRef" :open.sync="open" :tabName="tabName" :tabParams="tabParams" :hideColumns="hideColumns" @oncheck="oncheck"></table-dialog>
</my-form>
</template>
<script>
import MyForm from './form/form.vue'
import Column from './column.vue'
import TableDialog from '@/components/TableDialog/index.vue'
export default {
name: "EditTable",
components: { TableDialog, MyForm, Column },
props: {
height: {
type: [String, Number]
},
columnData: {
type: Array,
default: () => {
return []
}
},
emptyRow: {
type: Object,
default: () => {
return {}
}
},
tableData: {
type: Array,
default: () => {
return []
}
},
tableRules: {
type: Object,
default: () => {
return {}
}
},
options: {
type: Object,
default: () => {
return {
showAddBtn: true,
showDelBtn: true
}
}
},
rowKey: {
type: [String, Function]
},
defaultShowEdit: {
type: Boolean,
default: false
},
// 是否显示比对
isDiff: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
title: {
type: String,
default: ''
},
},
data() {
return {
tableDataTmp: {
tableData: []
},
// 末级列数据
columnDataLast: [],
tabName: null,
tabParams: {},
hideColumns: null,
editIndex: '', // 当前编辑单元格
open: false,
chooseData: {},
selections: [],
rowids: [],
selectList: [],
isEnter: false // 是否回车
}
},
created() {},
watch: {
'tableData': {
handler() {
let rowKeyTmp = new Date().getTime()
this.tableData.forEach((tb, index) => {
tb.rowEdit = (tb.rowEdit === undefined || tb.rowEdit === null) ? true : tb.rowEdit
if (!tb.__rowKey) {
tb.__rowKey = tb[this.rowKey] || (rowKeyTmp+'_'+index)
}
});
this.tableDataTmp = { tableData: this.tableData }
},
immediate: true
},
'columnData': {
handler() {
let columnDataLast = []
let func = (list, level) => {
list.forEach((item, index)=>{
if (item.children && item.children.length>0) {
func(item.children, level+'_'+index)
} else {
columnDataLast.push({ ...item, level__: level+'_'+index })
// 如果没有设置renderHeader，且是必填字段，添加必填星号
if (this.tableRules[item.prop] && !item.renderHeader) {
let valIndex = this.tableRules[item.prop].findIndex((validate)=>{
return validate.required
})
if (valIndex > -1) {
item.renderHeader = (h, data)=>{
return [
h('span', { style: 'color: #F56C6C;margin-right: 5px;' }, '*'),
h('span', item.label)
]
}
}
}
// 如果是dataSelect类型，预处理数据
if (item.editType === 'dataSelect') {
// let _options = { ...item.selectData, headers: { hideMessage: true } }
// request(_options).then((rsp)=>{
// this.$set(this.cacheSelectData, item.prop, rsp.data)
// })
}
}
})
}
func(this.columnData, 'a')
this.columnDataLast = columnDataLast
},
deep: true,
immediate: true
}
},
methods: {
// 表格行样式
tableRowClassName({row, rowIndex}) {
if (!this.isDiff) return ''
if (row.DELROW) {
return 'warning-row';
} else if (row.ADDROW) {
return 'success-row';
}
return '';
},
addRow() {
let index = this.tableDataTmp.tableData.length
let row = { __rowKey: new Date().getTime() }
if(this.emptyRow) row = { ...row, ...this.emptyRow }
this.tableDataTmp.tableData.splice(index, 0, row)
// this.$emit('update:tableData', this.tableDataTmp.tableData)
},
deleteRow() {
if (!this.rowids || this.rowids.length==0) {
this.$modal.msgError("请选择要删除的行");
return
}
this.rowids.forEach((id)=>{
let index = this.tableDataTmp.tableData.findIndex(item=>(item.__rowKey==id))
this.tableDataTmp.tableData.splice(index, 1)
})
// this.$emit('update:tableData', this.tableDataTmp.tableData)
},
selectionChange (selections) {
this.selections = selections
this.rowids = this.selections.map(item=>item.__rowKey)
this.$emit('selection-change', selections)
},
handleSelect(selection, row) {
this.$emit('select', selection, row)
},
getSelection () {
return this.selections
},
selectSame (sameList, checked) {
this.$nextTick(()=>{
sameList.forEach(item=>{
this.$refs.editTableRef.toggleRowSelection(item, checked)
})
})
},
onfocus(index_) {
setTimeout(async () => {
if (this.disabled) return false
this.editIndex = index_
const { rowIndex, colIndex, row, columnConfig, columnValue } = this.getCommonData()
if (columnConfig.editType === 'select') {
row[columnConfig.valprop || columnConfig.prop] = null
this.selectList = await columnConfig.selectData.getData(row)
row[columnConfig.valprop || columnConfig.prop] = columnValue
}
this.$nextTick(() => {
const editEl = this.getElementRef(rowIndex, colIndex)
if (columnConfig.editType === 'select') {
editEl.toggleMenu()
} else {
editEl && editEl.focus()
}
})
}, 200) // 日期回车下一个是下拉时，触发了下拉的回车事件，触发了两次回车
},
getElementRef (rowIndex, colIndex) {
let columnConfig = this.columnDataLast[colIndex]
let levels = columnConfig.level__.split('_')
let editEl = this
for(let n = 1;n<levels.length;n++) {
editEl = editEl.$refs['columnRef'][parseInt(levels[n])]
}
editEl = editEl.$refs['flaga-' + rowIndex + '-' + columnConfig.prop].$children[1]
// if (columnConfig.editType === 'dataSelect') {
// editEl = editEl.$children[0]
// }
return editEl
},
getCommonData () {
let indexs = this.editIndex.split('-')
let rowIndex = parseInt(indexs[0])
let colProp = indexs[1]
let colIndex = this.columnDataLast.findIndex((item)=>item.prop===colProp)
let columnConfig = this.columnDataLast[colIndex]
let row = this.tableDataTmp.tableData[rowIndex]
let columnValue = columnConfig.editType === 'select' ? row[columnConfig.valprop || columnConfig.prop] : row[columnConfig.prop]
return {rowIndex, colProp, colIndex, columnConfig, row, columnValue}
},
// 进入下一个可编辑单元格
nextStep() {
if (!this.editIndex) {
return false
}
let { rowIndex, colIndex, columnConfig } = this.getCommonData()
let nextColIndex = -1
// 查找当前行下一个可编辑项
if (colIndex < this.columnDataLast.length - 1) {
for (let ind = colIndex + 1; ind < this.columnDataLast.length; ind++) {
if (this.columnDataLast[ind].edit && this.columnDataLast[ind].editType !== 'link') {
nextColIndex = ind
columnConfig = this.columnDataLast[ind]
break
}
}
}
let editEl = this.getElementRef(rowIndex, colIndex)
// 找到下一个编辑列
if (nextColIndex !== -1) {
editEl.blur()
this.onfocus(rowIndex + '-' + columnConfig.prop)
}
// 未找到判断是否有下一行，有下一行进入下一行第一个
else if (rowIndex < this.tableDataTmp.tableData.length - 1) {
let nextRowIndex = this.tableDataTmp.tableData.findIndex((row, index)=>{
return index > rowIndex && row.rowEdit
})
if (nextRowIndex > -1) {
for (let ind = 0; ind < this.columnDataLast.length; ind++) {
if (this.columnDataLast[ind].edit && this.columnDataLast[ind].editType !== 'link') {
nextColIndex = ind
columnConfig = this.columnDataLast[ind]
break
}
}
// const editEl = this.getElementRef(rowIndex, colIndex)
editEl.blur()
this.onfocus(nextRowIndex + '-' + columnConfig.prop)
}
}
},
// 聚焦
editFocus(index_) {
this.editIndex = index_
// let {rowIndex, colIndex, columnConfig, row, columnValue} = this.getCommonData()
// let editEl = this.getElementRef(rowIndex, colIndex)
// if (columnConfig.editType === 'select') {
// editEl.toggleMenu()
// } else {
// editEl.focus()
// }
},
next () {
let {rowIndex, colIndex, columnConfig, row, columnValue} = this.getCommonData()
if (columnConfig.editType === 'date') {
this.nextStep()
return
} else if (columnConfig.editType === 'dialog') {
this.nextStep()
} else {
this.nextStep()
}
},
// 回车事件
keyupEnter(isNext=true, e) {
// console.log('====', isNext, this.isEnter, e)
if (isNext) {
this.isEnter = true
} else if (!isNext) {
let curField = this.getCommonData()
// 展示下拉项时，不要执行操作 | dialog失焦时不执行操作
if (curField.columnConfig.editType === 'select' && e == true) {
return false
} else if (curField.columnConfig.editType === 'dialog') {
return false
}
// 如果当前已标记为回车，不执行接下来的操作
if (this.isEnter) {
this.isEnter = false
return
}
// 下面这段逻辑暂时好像不需要
// else {
// let curField = this.getCommonData()
// if (curField.columnConfig.editType === 'select' && ) {
// // e===false && (this.editIndex=null)
// } else {
// this.editIndex = null
// }
// }
}
// console.log('====keyupEnter', this.editIndex)
let {rowIndex, colIndex, columnConfig, row, columnValue} = this.getCommonData()
// 如果是弹框，直接弹框
if (columnConfig.editType === 'dialog') {
// 单元格内容
this.tabName = columnConfig.dialogData.tabName
let tabParams = { [columnConfig.prop]: columnValue }
// 解析传入参数
let tabParamsIn = {}
if (columnConfig.dialogData.tabParams && typeof columnConfig.dialogData.tabParams == 'function') {
tabParamsIn = columnConfig.dialogData.tabParams(row)
} else if (columnConfig.dialogData.tabParams) {
tabParamsIn = columnConfig.dialogData.tabParams
}
tabParams = {...tabParamsIn, ...tabParams}
this.tabParams = tabParams
this.hideColumns = columnConfig.dialogData.hideColumns
this.open = true
this.$nextTick(()=>{
this.$refs.tableDialogRef.focusDialog()
})
return
} else if (columnConfig.editType === 'select') {
let current = this.selectList.find(item=>item[columnConfig.selectData.value] == columnValue)
if (!current) current = {}
this.chooseData = current
let updateFields = (columnConfig.selectData ? columnConfig.selectData.updateFields : null)
if (!updateFields && columnConfig.selectData) {
let defaultUpdateFields = {}
if (columnConfig.valprop) {
defaultUpdateFields = { [columnConfig.valprop]: columnConfig.selectData.value, [columnConfig.prop]: columnConfig.selectData.label }
} else {
defaultUpdateFields = { [columnConfig.prop]: columnConfig.selectData.value }
}
updateFields = defaultUpdateFields
}
this.updateChooseData(rowIndex, updateFields, true)
}
this.validateNext(isNext)
},
// 验证与下一步
validateNext (isNext = true) {
let {rowIndex, colIndex, columnConfig, row, columnValue} = this.getCommonData()
if (columnConfig.editType !== 'dialog') {
// this.$emit('update:tableData', this.tableDataTmp.tableData)
}
// 弹框传递额外参数
let otherParams = (columnConfig.editType === 'dialog') ? this.updateChooseData(rowIndex, (columnConfig.dialogData ? columnConfig.dialogData.updateFields : null)) : null
// let otherParams = JSON.parse(JSON.stringify(this.tableDataTmp.tableData[rowIndex]))
// 验证单元格数据，验证不通过不继续执行
this.$refs.tableForm.validateField('tableData.'+rowIndex+'.'+columnConfig.prop, (result) => {
if (result) {
if (columnConfig.editType === 'dialog') this.$modal.msgError(result)
return
}
if (columnConfig.editType === 'dialog') {
this.updateChooseData(rowIndex, (columnConfig.dialogData ? columnConfig.dialogData.updateFields : null), true)
// this.$emit('update:tableData', this.tableDataTmp.tableData)
this.open = false
}
// 判断是否跳转到下一步
let next = isNext ? this.next : ()=>{}
// 判断是否有业务回调 判断是否跳转到下一步
if (columnConfig.callback) {
columnConfig.callback({index: rowIndex, row: row, isEnter: isNext}, next )
return
}
next()
}, otherParams)
},
// 弹框选择带回
oncheck (chooseData) {
if (!chooseData) return;
this.chooseData = chooseData
// let {rowIndex, columnConfig} = this.getCommonData()
// this.updateChooseData(rowIndex, (columnConfig.dialogData ? columnConfig.dialogData.updateFields : null), true)
// this.open = false
this.validateNext()
},
/**
* 更新弹框数据。isTemp传true-更新数据，传false-返回临时数据
*/
updateChooseData (rowIndex, updateFields, isTemp = false) {
let tmpData = JSON.parse(JSON.stringify(this.tableDataTmp.tableData[rowIndex]))
if (updateFields) {
if (updateFields instanceof Array) {
updateFields.forEach((key) => {
tmpData[key] = this.chooseData[key]
isTemp && this.$set(this.tableDataTmp.tableData[rowIndex], key, this.chooseData[key])
})
} else {
var objkeys = Object.keys(updateFields)
objkeys.forEach((key) => {
tmpData[key] = this.chooseData[updateFields[key]]
isTemp && this.$set(this.tableDataTmp.tableData[rowIndex], key, this.chooseData[updateFields[key]])
})
}
}
return tmpData
},
validate (callback) {
return new Promise((resolve, reject) => {
this.$refs.tableForm.validate(callback).then((result)=>{
resolve(result)
}).catch(e=>{
let errorArr = Object.values(e)
this.$modal.msgError(errorArr[0][0].message);
reject(e)
})
})
},
validateRow (index, callback) {
return this.$refs.tableForm.validateRow(index, callback)
},
resetTableform() {
this.resetForm('tableForm')
},
clickLink(prop, scope) {
this.$emit('link', prop, scope)
}
},
};
</script>
<style lang="scss" scoped>
// .edit-table-dialog ::v-deep .table-form-item.is-error:hover .el-form-item__error{
// display: block!important;
// }
.edit-table-dialog{
// 标题按钮行
.title-tag {
margin: 4px 0;
flex-grow: 1;
}
.edit-table {
margin-top: 10px;
::v-deep .el-table__body-wrapper {
tr:hover > td.el-table__cell{
background-color: #fff;
}
// overflow: unset; // 超出的字段滚动
.el-table__cell {
padding: 0!important;
&.el-table-column--selection .el-checkbox {
margin-left: 16px;
}
.cell {
// overflow: unset;
padding: 0!important;
.column-text {
width: 100%;
height: 48px;
line-height: 48px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
justify-content: center;
align-items: center;
.edit-border {
cursor: pointer;
}
.date {
position: relative;
width: calc(100% - 12px);
height: 36px;
line-height: 36px;
border: 1px solid #F0F2F7;
border-radius: 4px;
text-align: left;
&::before {
content: "";
font-family: "element-icons";
color: #C0C4CC;
width: 30px;
position: relative;
top: -1px;
line-height: 34px;
text-align: center;
display: inline-block;
}
}
.select {
position: relative;
width: calc(100% - 12px);
height: 36px;
line-height: 36px;
border: 1px solid #F0F2F7;
border-radius: 4px;
text-align: left;
padding: 0 30px 0 10px;
&::after {
content: "";
color: #C0C4CC;
font-size: 14px;
font-family: "element-icons";
width: 25px;
text-align: center;
display: inline-block;
position: absolute;
right: 5px;
top: 0;
transform: rotate(180deg);
}
}
.input {
position: relative;
width: calc(100% - 12px);
height: 36px;
line-height: 36px;
border: 1px solid #F0F2F7;
border-radius: 4px;
text-align: left;
padding: 0 10px;
}
.dialog {
position: relative;
width: calc(100% - 12px);
height: 36px;
line-height: 36px;
border: 1px solid #F0F2F7;
border-radius: 4px;
text-align: left;
padding: 0 10px;
&::after {
content: "";
color: #C0C4CC;
font-size: 14px;
font-family: "element-icons";
width: 25px;
text-align: center;
display: inline-block;
position: absolute;
right: 4px;
top: 0;
}
}
}
.table-form-item {
margin: 0;
.diff-tag {
display: none;
}
/**.edit-tag {
position: absolute;
top: 0;
left: 0;
width: 8px!important;
height: 0;
border-left: 8px solid #1890ff;
border-bottom: 5px solid #fff;
z-index: 1;
}
&.is-error .edit-tag{
border-left-color: #ff4949;
} */
/** 错误 */
&.is-error .edit-border {
background: #FFF7F5;
border: 1px solid #F2B1A7;
}
&.diff{
color: #ff4949;
.diff-tag{
display: block;
position: absolute;
top: 30px;
left: 0;
}
}
.el-form-item__content{
& >div >div{
width: calc(100% - 14px);
&.has-unit {
width: 80%;
float: left;
}
// .el-date-editor,.el-input {
// width: calc(100% - 12px);
// }
/*&.el-select .el-input input {
height: 45px;
line-height: 45px;
border-radius: 0;
border-color: #fff;
padding: 0 30px 0 10px;
&:focus {
outline: none;
border-color: #1890ff;
}
}
&.el-input input {
height: 45px;
line-height: 45px;
border-radius: 0;
border-color: #fff;
padding: 0 30px 0 10px;
&:focus {
outline: none;
border-color: #1890ff;
}
}
&.el-date-editor input {
height: 45px;
line-height: 45px;
border-radius: 0;
padding: 0 30px;
}*/
}
.el-form-item__error{
display: none;
position: absolute;
top: unset;
bottom: 42px;
left: 0;
background-color: antiquewhite;
z-index: 999999;
width: 100%;
padding: 10px;
border-radius: 5px;
line-height: 20px;
&::after{
content: "";
height: 0;
width: 0;
border: 4px solid transparent;
border-top-color: antiquewhite;
position: absolute;
top: 100%;
right: 20px;
}
}
}
}
}
/** 复选框 */
&.el-table-column--selection .cell {
padding: 0 10px;
}
}
.el-table__empty-block {
background-image: none;
min-height: 60px!important;;
margin-bottom: 0;
span {
bottom: 0;
}
}
}
::v-deep .warning-row {
background: oldlace;
}
::v-deep .success-row {
background: #f0f9eb;
}
}
&.edit-table-disabled .edit-table {
::v-deep .el-table__body-wrapper {
.el-table__cell .column-text .edit-border{
cursor: not-allowed;
background-color: #f9f9f9!important;
border-color: #f0f2f7;
color: #BBBBBB;
}
}
}
}
.no-btns {
.edit-table {
margin-top: 0;
}
}
</style>
column.vue
import Vue from 'vue';
// import { hasClass, addClass, removeClass } from 'element-ui/src/utils/dom';
// import ElCheckbox from 'element-ui/packages/checkbox';
// import FilterPanel from './filter-panel.vue';
// import LayoutObserver from './layout-observer';
// import { mapStates } from './store/helper';
export default {
name: 'EditColumnRender',
props: {
column: {
type: Object
},
scope: {
type: Object
},
store: {
type: Object
// required: true
},
},
render(h) {
return (
<div>
{
this.column.renderTemp
? this.column.renderTemp.call(this._renderProxy, h, { column: this.column, scope: this.scope, store: this.store, _self: this.$parent.$vnode.context })
: ''
}
</div>
);
},
components: {
},
created() {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
data() {
return {
draggingColumn: null,
dragging: false,
dragState: {}
};
}
};
支持column-render.js ，支持render自定义列内容文章来源：https://www.toymoban.com/news/detail-751560.html
import Vue from 'vue';
// import { hasClass, addClass, removeClass } from 'element-ui/src/utils/dom';
// import ElCheckbox from 'element-ui/packages/checkbox';
// import FilterPanel from './filter-panel.vue';
// import LayoutObserver from './layout-observer';
// import { mapStates } from './store/helper';
export default {
name: 'EditColumnRender',
props: {
column: {
type: Object
},
scope: {
type: Object
},
store: {
type: Object
// required: true
},
},
render(h) {
return (
<div>
{
this.column.renderTemp
? this.column.renderTemp.call(this._renderProxy, h, { column: this.column, scope: this.scope, store: this.store, _self: this.$parent.$vnode.context })
: ''
}
</div>
);
},
components: {
},
created() {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
data() {
return {
draggingColumn: null,
dragging: false,
dragState: {}
};
}
};
使用方法如下
我这里全局引用了，你也可以局部引用进来文章来源地址https://www.toymoban.com/news/detail-751560.html
<edit-table
ref="editTable"
:empty-row="emptyRow"
:column-data="columnData"
:table-data.sync="tableData"
:table-rules="tableRules"
row-key="id"
></edit-table>data() {
return {
symbolList: [
{label: '相似', value: "%%%"},
{label: '左相似', value: "%%"},
{label: '右相似', value: "%"},
{label: '大于', value: ">"},
{label: '大于等于', value: ">="},
{label: '等于', value: "="},
{label: '小于', value: "<"},
{label: '小于等于', value: "<="}
],
relationList: [
{label: '并且', value: '&&'},
{label: '或者', value: '||'}
],
columnData: [
{ prop: 'name', type: 'selection' },
{
label: "列名",
prop: "queryColumn",
edit: true,
editType: "select",
selectData: {
label: "desc",
value: "value",
getData: () => {
return this.fields
}
},
format: (scope) => {
let current = this.fields.find(
(item) => item.value === scope.row.queryColumn
);
if (current) return current.desc;
}
},
{
label: "计算符",
prop: "querySymbol",
edit: true,
editType: "select",
selectData: {
label: "label",
value: "value",
getData: () => {
return this.symbolList
}
},
format: (scope) => {
let current = this.symbolList.find(
(item) => item.value === scope.row.querySymbol
);
if (current) return current.label;
}
},
{ label: "值", prop: "queryValue", edit: true, editType: 'template', renderTemp: (h, {scope})=>{
return h(ColumnEdit, {
props: {
column: 'queryValue',
scope: scope
}
}
)
}},
{
label: "列关系",
prop: "queryRelation",
edit: true,
editType: "select",
selectData: {
label: "label",
value: "value",
getData: () => {
return this.relationList
}
},
format: (scope) => {
let current = this.relationList.find(
(item) => item.value === scope.row.queryRelation
);
if (current) return current.label;
}
},
],
emptyRow: {
queryColumn: null,
querySymbol: null,
queryValue: null,
queryRelation: '&&'
},
tableData: [],
tableRules: {
queryColumn: [
{ required: true, message: "列名不能为空", trigger: "change" },
],
querySymbol: [
{ required: true, message: "计算符不能为空", trigger: "change" },
],
queryValue: [
{ required: true, message: "值不能为空", trigger: "change" },
],
queryRelation: [
{ required: true, message: "列关系不能为空", trigger: "change" },
],
},
};到了这里，关于基于element UI 显示编辑表格的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
