EditTable.vue

<template>
  <div>
    <c-col :span="isAdd ? 21 : 22" style="margin-bottom: 18px" :offset="1">
      <c-table
        style="text-align: center"
        :ref="urls"
        :list="dataSource"
        :paginationShow="paginationShow"
        :border="border"
        :highlight-current-row="highlight"
        :row-class-name="tableRowClassName"
        @row-click="handleClick"
      >
        <el-table-column v-if="isIndex" type="index" width="50">
        </el-table-column>
        <template v-for="item in columns">
          <el-table-column
            :label="item.title"
            :min-width="item.width"
            :key="item.dataIndex"
          >
            <template slot-scope="scope">
              <el-select
                v-if="item.show === 'select'"
                v-model="scope.row[item.dataIndex]"
                :code="item.code"
                :disabled="disabledAll"
              ></el-select>
              <el-input
                v-else-if="item.show === 'input'"
                v-model="scope.row[item.dataIndex]"
                :placeholder="`请输入${item.title}`"
                :disabled="disabledAll"
              ></el-input>
              <span v-else>{{ scope.row[item.dataIndex] }}</span>
            </template>
          </el-table-column>
        </template>
        <slot></slot>
      </c-table>
    </c-col>
    <c-col v-if="isAdd" :span="1">
      <div class="button_contains" >
        <span class="add_del_button add_button" @click="handleAdd" >+</span>
        <span class="add_del_button" @click="handleDelete" >-</span>
      </div>
    </c-col>
  </div>
</template>
<script>
import commonProcess from "~/mixin/commonProcess";
import _ from "~/utils/Lodash.js";
import Table from "./Table.vue";

export default {
  components: { "c-table": Table },
  inject: ["root"],
  mixins: [commonProcess],

  data() {
    return {
      dataSource: _.get(this.model, this.urls, []),
      rowIndex: null,
    };
  },

  props: {
    model: {
      type: Object,
      default: undefined,
    },
    urls: {
      //data数据所在model中的路径
      type: String,
      default: "",
    },
    columns: {
      //列信息
      type: Array,
      default: function () {
        return [];
      },
    },
    paginationShow: {
      type: Boolean,
      default: false,
    },
    disabledAll:{
      //是否全部灰显
      type: Boolean,
      default: false,
    },

    border: {
      //是否有边框
      type: Boolean,
      default: true,
    },
    highlight: {
      type: Boolean,
      default: true,
    },
    isIndex: {
      type: Boolean,
      default: false,
    },
    isAdd: {
      //添加删除列
      type: true,
      default: true,
    },
  },
  computed: {},

  // watch: {
  //   dataSource: {
  //     handler(val, oldVal) {
  //       console.log("数据变化:", val, this.model);
  //       // _.set(this.model, this.urls, val);
  //       // console.log(this.model);
  //     },
  //     immediate: true,
  //     deep: true,
  //   },
  // },
  methods: {
    //获取表格数据索引，方便删除
    tableRowClassName({ row, rowIndex }) {
      Object.defineProperty(row, "row_index", {
        value: rowIndex,
        configurable: true,
        writable: true,
        enumerable: false, //不可枚举
      });
    },

    // 记录选中行索引
    handleClick(row, column, event) {
      console.log(row);
      this.rowIndex = row.row_index;
      console.log("选择：" + this.rowIndex);
    },

    handleAdd() {
      let arr = {};
      for (let it of this.columns) {
        arr[it.dataIndex] = "";
      }
      this.dataSource.push({ ...arr });
    },
    handleDelete() {
      if (this.dataSource.length === 0) return;
      if (this.rowIndex === null) {
        this.rowIndex = this.dataSource[this.dataSource.length - 1].row_index; //没有选中删除最后一行
      }
      this.dataSource.splice(this.rowIndex, 1);
      this.rowIndex = null;
      //this.$refs[this.urls].clearSelection();
    },
  },

  created: function () {},
};
</script>
<style>
.button_contains {
  margin-top: 18px;
  margin-left: 2px;
  display: flex;
  flex-direction: column;
  /* text-align: right; */
}
.add_del_button {
  display: block;
  height: 15px;
  width: 26px;
  flex: 0;
  line-height: 15px;
  text-align: center;
  font-size: 12px;
  border-radius: 5px;
  border: 1px solid rgb(194, 192, 192);
  background-color: rgb(240, 240, 240);
}
.add_button {
  margin-bottom: 2px;
}
.add_del_button:hover {
  cursor: pointer;
  background-color: rgb(230, 227, 227);
}
</style>