问题
提示:elementu 可编辑表格校验
<template>
<div>
<el-form
ref="tableFrom"
:model="{ ...tableDatas }"
:rules="tableFromRules"
:show-message="false"
class="tableForm"
>
<el-table
v-loading="loading"
ref="vTableRef"
:data="tableDatas"
:header-cell-style="{ color: 'black', background: '#f8f8ff' }"
:row-class-name="tableRowClassName"
:row-style="setRowStyle"
size="small"
border
highlight-current-row
tooltip-effect="dark"
style="width: 100%"
@selection-change="selectionChange"
>
<el-table-column
v-if="isRadio && showChoiceBox"
align="center"
width="50"
fixed="left"
>
<template slot-scope="scope">
<el-radio
:label="scope.row"
v-model="selectedTableRow"
@click.native.stop.prevent="getTableRow(scope.row)"
>
{{ }}
</el-radio>
</template>
</el-table-column>
<el-table-column
v-if="isCheckBox && showChoiceBox"
type="selection"
align="center"
width="50"
fixed="left"
/>
<el-table-column
v-if="isIndex"
:index="isShowPages ? getIndex : null"
type="index"
align="center"
label="序号"
width="80"
fixed="left"
/>
<div v-for="(item, index) in keyList" :key="index">
<el-table-column
v-if="!item.type && !item.popover"
:formatter="item.formatter"
:prop="item.prop"
:label="item.label"
:width="item.width"
align="center"
show-overflow-tooltip
/>
<el-table-column
v-if="item.type"
:key="index"
:formatter="item.formatter"
:prop="item.prop"
:label="item.label"
:width="item.width"
align="center"
>
<template slot-scope="scope">
<el-form-item
:prop="scope.$index + '.' + item.prop"
:rules="tableFromRules[item.prop]"
>
<el-input
v-if="item.type === 'input'"
v-model="scope.row[item.prop]"
:class="item.class"
:disabled="item.disabled"
:maxlength="item.maxlength"
clearable
size="mini"
@blur="val => {item.func ? item.func(val, scope.row) : handleBlur(val, scope.row)}"
/>
<el-select
v-if="item.type === 'select'"
v-model="scope.row[item.prop]"
filterable
size="mini"
@change="val => {item.func ? item.func(val, scope.row) : null}"
>
<el-option
v-for="(item1, index) in item.option"
:key="index"
:label="item1.value + '-' + item1.label"
:value="item1.value"
/>
</el-select>
<el-date-picker
v-date-format
v-if="item.type === 'date'"
v-model="scope.row[item.prop]"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
@change="val => {item.func ? item.func(val, scope.row) : handleChange(val, scope.row)}"
/>
</el-form-item>
</template>
</el-table-column>
<el-table-column
v-if="item.popover"
:formatter="item.formatter"
:prop="item.prop"
:label="item.label"
:width="item.width"
align="center"
>
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>{{ scope.row[item.popover] }}</p>
<div slot="reference">
{{ scope.row[item.prop] }}
</div>
</el-popover>
</template>
</el-table-column>
</div>
<el-table-column
v-if="tableTrue"
width="125"
align="center"
>
<template slot-scope="scope">
<el-popover
:ref="`popover-${scope.$index}`"
v-model="scope.row.visible"
placement="top"
width="180"
>
<p>确定删除本条数据吗?</p>
<div style="text-align: right; margin: 0">
<el-button
size="mini"
type="text"
@click="$refs[`popover-${scope.$index}`].doClose()"
>取消</el-button
>
<el-button
type="primary"
size="mini"
@click="subDelete(scope.$index)"
>确定</el-button
>
</div>
<el-button
slot="reference"
type="danger"
icon="el-icon-delete"
size="mini"
@click="scope.row.visible = true"
/>
</el-popover>
</template>
</el-table-column>
</el-table>
<el-button
v-if="isShowhandAdd"
class="addrow"
type="text"
size="mini"
@click="handAdd"
>
+ 添加</el-button
>
</el-form>
<div class="laypage_container">
<div class="slot_con">
<slot />
</div>
<el-pagination
v-if="isShowPages"
:current-page="pageObj.page"
:page-size="pageObj.pageSize"
:total="pageObj.total"
:page-sizes="pageObj.sizes || [5, 10, 20, 30, 50, 100]"
class="laypage_con"
layout="total, prev, pager, next, sizes"
@size-change="handleSizeChange"
@current-change="handlePageChange"
/>
</div>
</div>
</template>
<script>
export default {
props: {
// 表格校验
tableFromRules: {
type: Object,
default: function() {
return []
}
},
// 表格字段列表
keyList: {
type: Array,
default: () => {
return []
}
},
// 表格数据列表
dataList: {
type: Array,
required: true,
default: () => {
return []
}
},
// 选择列(单/多选)是否展示
showChoiceBox: {
type: Boolean,
default: true
},
// 单选列
isRadio: {
type: Boolean,
default: false
},
// 多选列
isCheckBox: {
type: Boolean,
default: false
},
// 序号
isIndex: {
type: Boolean,
default: true
},
loading: {
type: Boolean,
default: false
},
// 是否显示分页
isShowPages: {
type: Boolean,
default: true
},
// 分页对象
pageObj: {
type: Object,
default: () => {
return {}
}
},
// 是否可编辑
isCompile: {
type: Boolean,
default: false
},
// 设置表格行样式
setRowStyle: {
type: Function,
default: () => {}
},
// 是否需要操作列
tableTrue: {
type: Boolean,
default: false
},
// 是否需要添加行
isShowhandAdd: {
type: Boolean,
default: false
}
},
data() {
return {
selectedTableRow: {} // 单选数据
}
},
computed: {
tableDatas() {
if (this.dataList.every((item) => typeof (item) === 'object')) {
return this.dataList
} else {
return []
}
}
},
methods: {
// 单选行
getTableRow(rowObj) {
this.selectedTableRow = rowObj
this.$emit('getTableRow', rowObj)
},
// 多选行
selectionChange(valArr) {
this.$emit('selectionChange', valArr)
this.$emit('getTableRow', valArr)
},
subDelete(index) {
// 新增页面的删除
this.tableDatas.splice(index, 1)
},
// 表格序号
getIndex(index) {
return index + 1 + (this.pageObj.page - 1) * this.pageObj.pageSize
},
// 每页多少条改变
handleSizeChange(size) {
// console.log(size, 'size')
this.pageObj.page = 1
this.pageObj.pageSize = size
this.$emit('laypageChange')
},
// 当前页改变
handlePageChange(page) {
// console.log(page, 'page')
this.pageObj.page = page
this.$emit('laypageChange')
},
// 单选行选中方法
setCurrentRow(row) {
this.selectedTableRow = row
this.$refs.vTableRef.setCurrentRow(row)
},
// 行数据中添加索引
tableRowClassName({ row, rowIndex }) {
row.index = rowIndex
},
// 添加行
handAdd() {
this.tableDatas.push({})
},
handleBlur(val, row) {
this.$emit('handleBlur', val, row)
},
handleChange(val, row) {
this.$emit('handleChange', val, row)
},
checkTable(callback) {
this.$refs.tableFrom.validate((valid, object) => {
if (valid && callback) {
callback()
// console.log('回调完毕')
} else {
for (var key in object) {
console.log(object, 'object')
if (object.hasOwnProperty(Object.keys(object)[0])) {
this.$pop(
object[Object.keys(object)[0]][0].message,
'warning',
this
)
}
}
}
})
}
}
}
</script>
<style scoped>
.laypage_container {
display: block;
overflow: hidden;
padding: 10px 0 5px;
}
.slot_con {
float: right;
}
.laypage_con {
float: left;
}
.addrow {
text-align: center;
width: 100%;
border: 1px dashed #dfe6ec
}
/deep/.el-pagination {
font-size: 14px;
}
/deep/.el-pagination span {
font-size: 14px;
}
/deep/.el-pagination button:disabled {
color: #c0c4cc;
background-color: #f8f9fd;
cursor: not-allowed;
}
/deep/ .el-form-item__content {
height: 30px !important;
line-height:30px !important;
padding: 0 !important;
}
/deep/ .el-form-item {
margin-bottom: 0 !important;
}
/*表单校验提示(placeholder)样式 */
/deep/.el-form-item__error {
background-color: transparent !important;
line-height: 1em !important;
font-size: 10px !important;
position: absolute;
left: 10px;
}
</style>