<template>
|
<div>
|
<el-table :data="tableOptions.tableData" @cell-click="cellCilck" @cell-mouse-leave="cellMouseLeave" height="250" border style="width: 100%">
|
<el-table-column v-for="(item,index) in tableOptions.options" :key="index" align="center"
|
:prop="item.prop" :label="item.label" :width="item.labelWidth">
|
<template slot-scope="{row}">
|
<!-- 自定义的字段 -->
|
<div v-if="item.isSlot">
|
<slot :name="item.prop" :row="row"></slot>
|
</div>
|
<div v-else>
|
<el-input v-if="row.isClickProperty == item.prop" v-model="row[item.prop]" placeholder="请输入内容" @change="valChange"></el-input>
|
<span v-else>{{row[item.prop]}}</span>
|
</div>
|
</template>
|
<!-- 表格内操作按钮 -->
|
<template slot="menu" slot-scope="{scope}">
|
<el-button type="text"
|
size="small"
|
icon="el-icon-search"
|
plain
|
@click="scope.row.isquery=!scope.row.isquery">
|
{{scope.row.isquery ? "取消快速查询":"快速查询"}}
|
</el-button>
|
<el-button type="text"
|
size="small"
|
icon="el-icon-minus"
|
plain
|
@click="removeCurrentRow(scope.row,'removeAttr')">移除
|
</el-button>
|
</template>
|
<!-- 表格左上方按钮区域 -->
|
<template slot="menuLeft" slot-scope="scope">
|
<el-button type="primary"
|
size="small"
|
icon="el-icon-plus"
|
@click="openSelectionTable('selectAttr')">选择属性
|
</el-button>
|
<div class="tag-group" style="display: inline">
|
<el-tag
|
v-for="item in attrData"
|
v-show="item.isquery && item.title!=''"
|
style="margin-left: 3px"
|
:key="item.title"
|
type="info"
|
size="small"
|
effect="dark">
|
{{ item.title }}
|
</el-tag>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
<script>
|
export default {
|
name: "tableEdit",
|
props:{
|
tableOptions:{
|
type:Object,
|
default(){
|
return {}
|
}
|
}
|
},
|
data(){
|
return{}
|
},
|
methods:{
|
//单击单元格开启编辑
|
cellCilck(row, column, cell, event){
|
this.$set(row, "isClickProperty", column.property);
|
console.log(row,column,cell,event);
|
},
|
//鼠标离开单元格,编辑关闭
|
cellMouseLeave(row){
|
this.$set(row, "isClickProperty", "");
|
},
|
//编辑单元格值变化
|
valChange(val){
|
this.$emit("editTable",val)
|
}
|
}
|
}
|
</script>
|
|