|
|
@@ -1,152 +1,152 @@
|
|
|
-<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.dictName }}</p>
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- v-model="newName"
|
|
|
- v-else
|
|
|
- :placeholder="obj.dictName"
|
|
|
- />
|
|
|
- </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="detletData"
|
|
|
- @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].dictName;
|
|
|
- console.log(this.newName);
|
|
|
- this.editFlag.splice(i, 1, true);
|
|
|
- },
|
|
|
- // 确认编辑
|
|
|
- submitEdit: function (i) {
|
|
|
- if (!this.newName) {
|
|
|
- alert("姓名不能为空");
|
|
|
- } else if (this.newName === this.tableData[i].dictName) {
|
|
|
- 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;
|
|
|
- },
|
|
|
- // 模态框确认删除
|
|
|
- detletData: 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();
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</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>
|
|
|
+<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.dictName }}</p>
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ v-model="newName"
|
|
|
+ v-else
|
|
|
+ :placeholder="obj.dictName"
|
|
|
+ />
|
|
|
+ </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="detletData"
|
|
|
+ @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].dictName;
|
|
|
+ console.log(this.newName);
|
|
|
+ this.editFlag.splice(i, 1, true);
|
|
|
+ },
|
|
|
+ // 确认编辑
|
|
|
+ submitEdit: function (i) {
|
|
|
+ if (!this.newName) {
|
|
|
+ alert("姓名不能为空");
|
|
|
+ } else if (this.newName === this.tableData[i].dictName) {
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+ // 模态框确认删除
|
|
|
+ detletData: 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();
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</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>
|