Lexus-media/src/views/parameter/components/PlatformModule/DetailPageTable.vue

<template>
  <div class="table">
    <table>
      <thead>
        <tr>
          <td>版块</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(obj, index) in tableData"
          :key="index"
          :class="{ table_gray: index % 2 === 0 }"
        >
          <td style="width: 50%">
            <p v-if="!editFlag[index]">{{ obj.platformName }}</p>
            <input
              type="text"
              v-model="newName"
              v-else
              :placeholder="obj.platformName"
            />
          </td>
          <td style="width: 50%" class="operation">
            <span @click="edit(index)" v-if="!editFlag[index]">编辑</span>
            <span @click="submitEdit(index)" v-else>确定</span>
            <span @click="showModal(index)">删除</span>
          </td>
        </tr>
      </tbody>
    </table>
    <DeleteModal
      @detlet_data="delettData"
      @hide_modal="closeModal"
      :modalFlag="deleteModalFlag"
    ></DeleteModal>
  </div>
</template>

<script>
import DeleteModal from "../DeleteModal";
export default {
  props: {
    // 表数据
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //  表格一页共有多少数据
    pageSize: {
      type: Number,
      default: 2,
    },
  },
  components: {
    DeleteModal,
  },
  data() {
    return {
      deleteModalFlag: false,
      index: 0,
      editFlag: [],
      newName: "", // 编辑之后的值
    };
  },
  methods: {
    edit: function (i) {
      this.getEditArr(); // 确保只有一个在编辑
      this.newName = this.tableData[i] && this.tableData[i].platformName;
      console.log(this.newName);
      this.editFlag.splice(i, 1, true);
    },
    // 确认编辑
    submitEdit: function (i) {
      if (!this.newName) {
        alert("版块名称不能为空");
      } else if (this.newName === this.tableData[i].module) {
        this.newName = ""; // 没有改
      } else {
        this.$emit("edit", i, this.newName);
      }
      this.newName = "";
      this.editFlag.splice(i, 1, false);
    },
    // 点击删除，展示模态框
    showModal: function (i) {
      this.deleteModalFlag = true;
      this.index = i;
    },
    // 模态框确认删除
    delettData: function () {
      this.deleteModalFlag = false;
      this.$emit("delet_data", this.index);
    },
    // 模态框取消
    closeModal: function () {
      this.deleteModalFlag = false;
    },
    // 生成点击编辑按钮所用额flag，
    getEditArr: function () {
      let arr = new Array(this.pageSize).fill(false);
      this.editFlag = arr;
    },
    mounted() {
      this.getEditArr();
      console.log(this.tableData);
    },
  },
};
</script>

<style scoped lang="less">
.table {
  background-color: #fff;
  width: 100%;
  margin-top: 10px;
  text-align: center;
  table {
    width: 100%;
    border-collapse: collapse;
    border: none;
    thead {
      td {
        background: #8d9092;
        height: 36px;
        color: #fff;
        border: 1px solid #ccc;
      }
    }
    tbody {
      td {
        height: 36px;
        border: 1px solid #ccc;
      }
      .operation {
        span {
          color: #00f;
          margin: 0 20px;
          &:hover {
            cursor: pointer;
          }
        }
      }
    }
  }
}
.table_gray {
    background: #f5f5f5
}
</style>