TableRowEdit.vue
<template>
<div>
<ux-grid
:data="tableData"
tooltip-effect="dark"
show-overflow="tooltip"
:cell-style="{'text-align':'center'}"
:row-class-name="tableRowClassName"
:max-height="tableConfig.height"
style="width: 100%">
<ux-table-column
v-if="isShow.isSelection"
type="checkbox"
width="40">
</ux-table-column>
<ux-table-column
type="index"
label="序号"
style="min-width: 80px;max-width:120px;"
width="60"
v-if="isShow.isIndex">
</ux-table-column>
<ux-table-column
v-for="(e, i) in columns"
:key="i"
:resizable="true"
header-align="center"
:field="e.fieldCode"
:title="e.fieldName"
min-width="140"
>
<template slot="header" slot-scope="scope">
<div>{{ e.fieldName }}<i v-if="e.isSelect||e.isInput" class="el-icon-edit"></i></div>
</template>
<!-- 选择器 -->
<template v-slot="scope" v-if="e.isSelect">
<div v-if="scope.row.index==tableCli">
<el-select
v-model="scope.row[e.fieldCode]"
>
<el-option
v-for="item in e.SelectList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<span v-else>{{ getType(e.SelectList,scope.row[e.fieldCode]) }}</span>
</template>
<!-- 输入框 -->
<template v-slot="scope" v-else-if="e.isInput">
<div v-if="scope.row.index==tableCli">
<el-input v-model="scope.row[e.fieldCode]"></el-input>
</div>
<span v-else>{{scope.row[e.fieldCode]}}</span>
</template>
<!-- 禁止编辑 -->
<template v-slot="scope" v-else>
<span>{{scope.row[e.fieldCode]}}</span>
</template>
</ux-table-column>
<ux-table-column
fixed="right"
title="操作"
v-if="isShow.isShowButton"
header-align="center"
min-width="150">
<template slot-scope="scope">
<el-button
v-if="isShow.isShowButton&&scope.row.index!==tableCli"
type="text"
@click="editButton(scope.row,scope)"
:icon="isShow.iconEdit?isShow.iconEdit:'el-icon-edit'"
size="small"
>
{{ isShow.editTxt }}
</el-button>
<el-button type="text" v-if="scope.row.index==tableCli" @click="saveButton(scope.row,scope)" size="small">保存</el-button>
<el-button type="text" v-if="scope.row.index==tableCli" size="small" @click="cancelEdit">取消</el-button>
</template>
</ux-table-column>
</ux-grid>
<el-pagination
v-if="setPage.isPagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="setPage.currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="setPage.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="setPage.total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableCli:-1,
// 自适应高度
tableConfig:{
isLoading:true,
height:window.innerHeight-190
},
}
},
props:{
// table 表格显示高度
tableHeight:{
type:Number,
default:() => {
return 190
}
},
// 表头
columns:{
type:Array,
default:() => {
return []
}
},
// 表格
tableData:{
type:Array,
default:() => {
return []
}
},
// 页码的设置
setPage:{
type:Object,
default:() => {
return {
isPagination:false,//是否显示
currentPage:1,//当前页码
pageSize:100, // 当前页的数量
total:0, // 总量
}
}
},
// 是否显示
isShow:{
type:Object,
default:() => {
return {
}
}
},
},
created(){
// 初始化开始监听自适应高度数据
window.addEventListener("resize",this.getHeigth)
},
destroyed(){
// 销毁高度自适应监听
window.removeEventListener("resize",this.getHeigth)
},
watch:{
tableHeight: {
handler(newVal, oldVal) {
this.tableConfig.height = window.innerHeight - newVal
},
deep: true,
immediate: true
}
},
methods:{
// 此方法用于区分是否点击的是当前行
tableRowClassName({row,rowIndex}){
row.index=rowIndex
},
// 点击编辑事件
editButton(row,index){
this.tableCli=index.$rowIndex
},
// 行编辑保存事件
saveButton(row,index){
this.$emit("saveButton",row,index)
},
// 取消编辑
cancelEdit(){
this.tableCli = -1
},
// 转换格式
getType(data,val) {
const item = data.filter(item => item['value'] === val)[0]
return item ? item.label : ''
},
// 自适应高度
getHeigth(){
// this.tableConfig.height = window.innerHeight - 170
this.tableConfig.height = window.innerHeight - this.tableHeight
},
// 每页的数量
handleSizeChange(val) {
this.$emit("handleSizeChange",val)
},
// 当前页码
handleCurrentChange(val) {
this.$emit("handleCurrentChange",val)
}
}
}
</script>