1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<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>