rt-sim-training-client/src/views/components/editTable/index.vue

<template>
  <div>
    <el-table
      :size="size"
      :stripe="stripe"
      :border="border"
      :data="tableData"
      :max-height="maxHeight"
      :height="height"
    >
      <el-table-column v-if="tableForm.index" fixed type="index" />
      <template v-for="(column, index) in tableForm.columns">
        <el-table-column
          v-if="checkFieldType(column.type, 'text')"
          :key="index"
          :prop="column.prop"
          :label="column.title"
          :width="column.width || labelWidth"
          :sortable="column.sortable"
        >
          <template slot-scope="scopeT" @focus="handleFocus" @blur="handleBlur">
            <template v-if="column.editable && (scopeT.row.editing || column.editing)">
              <el-input v-model="scopeT.row[column.prop]" :size="size" />
            </template>
            <template v-else>
              {{ formatText(column, scopeT.row) }}
            </template>
          </template>
        </el-table-column>
        <el-table-column
          v-if="checkFieldType(column.type, 'select')"
          :key="index"
          :prop="column.prop"
          :label="column.title"
          :width="column.width || labelWidth"
          :sortable="column.sortable"
        >
          <template slot-scope="scopeS">
            <template v-if="column.editable && (scopeS.row.editing || column.editing)">
              <el-select v-model="scopeS.row[column.prop]" :size="size">
                <el-option
                  v-for="item in obtainOptions(column)"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
            <template v-else>
              {{ formatText(column, scopeS.row) }}
            </template>
          </template>
        </el-table-column>
        <el-table-column
          v-if="checkFieldType(column.type, 'tag')"
          :key="index"
          :prop="column.prop"
          :label="column.title"
          :width="column.width || labelWidth"
          :sortable="column.sortable"
        >
          <template slot-scope="scopeG">
            <template v-for="tag in column.columnValue(scopeG.row)">
              <el-tag
                :key="tag"
                :type="column.tagType(scopeG.row, scopeG.$index)"
                style="margin-right: 10px; margin-bottom: 5px;"
              >{{ tag }}</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          v-if="checkFieldType(column.type, 'button')"
          :key="index"
          fixed="right"
          :prop="column.prop"
          :label="column.title"
          :width="column.width || labelWidth"
          :sortable="column.sortable"
        >
          <template slot-scope="scopeB">
            <el-button :size="size" type="warning" @click.native.prevent="handleFocus(scopeB)">编辑</el-button>
            <template v-for="(action,idx) in column.buttons">
              <el-button :key="idx" :size="size" :type="action.type" @click.native.prevent="handleClick(action, scopeB)">{{ action.name }}</el-button>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
	props: {
		maxHeight: {
			type: Number,
			default() {
				return 400;
			}
		},
		height: {
			type: Number,
			default() {
				return 400;
			}
		},
		size: {
			type: String,
			default() {
				return 'mini';
			}
		},
		border: {
			type: Boolean
		},
		stripe: {
			type: Boolean
		},
		tableData: {
			type: Array,
			default() {
				return [];
			}
		},
		tableForm: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			scope: null,
			labelWidth: '120'
		};
	},
	methods: {
		obtainOptions(column) {
			return column.options();
		},
		checkFieldType(field, type) {
			return field == type;
		},
		formatText(column, row) {
			return column.format ? column.format(row) : row[column.prop];
		},
		handleClick(action, scope) {
			this.handleBlur(this.scope);
			action.handleClick(scope.$index, scope.row);
		},
		handleFocus(scope) {
			this.handleBlur(this.scope);
			this.$set(this.tableData[scope.$index], 'editing', true);
			this.scope = scope;
		},
		handleBlur(scope) {
			if (scope) {
				this.$set(this.tableData[scope.$index], 'editing', false);
			}
		}
	}
};
</script>
<style lang="scss" scoped>
	/deep/  .el-table {
		td,th {
			padding:  0px;
		}
		td:nth-child(1), th:nth-child(1) {
			background: #fefefe;
		}
	}
</style>