前端页面table数据自动生成序号

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_37782076/article/details/84645589

<template>
  <div class="content-container">
    <div class="content-tool">
      <div class="content-row content-row--tool content-row--tool-first" :style="{'marginBottom': !selectShow ? '6px' : '20px'}">
        <div class="content-tool--nav" style="width: 80%;">
          <div class="content-tool--title fl">反馈项</div>
          <el-input
            placeholder="请输入反馈项搜索"
            icon="search"
            v-model="itemName"
            :on-icon-click="getDataPage"
            class="content-tool--input fl">
          </el-input>
        </div>
        <div class="content-tool--nav" style="width: 20%; float: right;">
          <div class="content-tool--operate fl">
            <el-button type="primary" class="content-tool--qry el-button-reset fl" @click="searchList">查询</el-button>
            <el-button class="content-tool--reset el-button-reset fl" @click="rest">重置</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="content-operate">
      <el-button @click="addFeedBackItem" type="primary" class="content-operate--add el-button-reset">新增</el-button>
    </div>
    <div class="table">
      <el-table
        ref="multipleTable"
        :data="feedBackItemList"
        tooltip-effect="dark"
        style="width: 100%; font-size: 13px;">
        <el-table-column
          type="index"
          :index="this.indexStartNum"
          label="序号"
          width="100">
        </el-table-column>
        <el-table-column
          prop="feedbackType"
          label="反馈类型">
        </el-table-column>
        <el-table-column
          prop="itemName"
          label="反馈项">
        </el-table-column>
        <el-table-column
          prop="todo"
          label="操作"
          width="150">
          <template slot-scope="scope">
            <span @click="delFeedBackItem(scope.row.itemId)" class="edit-operation">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @current-change="getAdminCurrentPageList"
        :current-page.sync="pageNum"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="allDataTotal">
      </el-pagination>
    </div>

    <div class="dialog-add">
      <el-dialog width="35%" :title="dialogTitle" :visible.sync="dialogFormVisible" @close="closeCallback">
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item label="反馈类型" :label-width="formLabelWidth" prop="belongFeedbackTypeId">
              <div class="dialog-set-role">
                <el-checkbox-group v-model="form.belongFeedbackTypeId" class="dialog-set-role-check">
                  <el-checkbox v-for="feedback in allFeedbackConfigs" :label="feedback.feedbackTypeId" :key="feedback.feedbackTypeId">{{feedback.feedbackType}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-form-item>
          <el-form-item label="反馈项" prop="itemName" :label-width="formLabelWidth">
            <el-input v-model="form.itemName" auto-complete="off" placeholder="请输入反馈项，最多10个字" maxlength="10" style="width: 290px;"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="clearFeedBackItem">取 消</el-button>
          <el-button type="primary" @click="saveFeedBackItem">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import api from '@/api/feedbackApi';
import resizeSensor from 'vue-resize-sensor';

export default {
  name: 'table-demo',
  components: {
    resizeSensor,
  },
  data() {
    return {
      indexStartNum: 1,
      dialogTitle: '新增',
      pageNum: 1,
      pageSize: 10,
      allDataTotal: 0,
      allPageSize: 0,
      itemName: '',
      feedBackItemList: [],
      multipleSelection: [],
      allFeedbackConfigs: [],
      selectItemTotal: 0,
      selectShow: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '80px',
      form: {
        belongFeedbackTypeId: [],
        itemName: '',
      },
      rules: {
        itemName: [
          { required: true, message: '请输入反馈项', trigger: 'blur' },
          { min: 0, max: 10, message: '最多输入10个字', trigger: 'blur' },
        ],
        belongFeedbackTypeId: [
          { type: 'array', required: true, message: '请至少选择一个反馈类型', trigger: 'change' },
        ],
      },
    };
  },
  computed: {
    tableHeight() {
      return this.tableData3.length > 10 ? 441 : ((this.tableData3.length + 1) * 40) + 1;
    },
  },
  mounted() {
    this.getDataPage();
  },
  methods: {
    getDataPage() {
      api.getFeedBackItemPage({
        params: {
          params: {
            pageNum: this.pageNum - 1,
            pageSize: this.pageSize,
            itemName: this.itemName,
          },
        },
      }).then((data) => {
        this.feedBackItemList = data.data.content;
        this.allDataTotal = data.data.total;
        this.allPageSize = (data.data.total / this.pageSize) + 1;
        this.indexStartNum = ((this.pageNum - 1) * this.pageSize) + 1;
      }).catch((err) => {
        this.$message({
          message: err.response.message,
          type: 'error',
        });
      });
    },

    addFeedBackItem() {
      this.getAllFeedbackConfigIds();
      this.dialogFormVisible = true;
    },

    getAllFeedbackConfigIds() {
      api.getFeedbackTypeList({
        params: {
          params: {
          },
        },
      }).then((data) => {
        this.allFeedbackConfigs = data.data;
      }).catch((err) => {
        this.$message({
          message: err.response.message,
          type: 'error',
        });
      });
    },

    saveFeedBackItem() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          api.saveFeedBackItemData({
            params: {
              params: {
                feedbackConfigIds: this.form.belongFeedbackTypeId,
                itemName: this.form.itemName,
              },
            },
          }).then((data) => {
            if (data.state === 0) {
              this.$message({
                message: data.message,
                type: 'success',
              });
              this.clearFeedBackItem();
              this.getDataPage();
            }
          }).catch((err) => {
            this.$message({
              message: err.response.message,
              type: 'error',
            });
          });
        }
      });
    },

    clearFeedBackItem() {
      this.dialogFormVisible = false;
      this.$refs.form.resetFields();
      this.form = {
        belongFeedbackTypeId: [],
        itemName: '',
      };
    },

    rest() {
      this.itemName = '';
      this.pageNum = 1;
      this.searchList();
    },

    closeCallback() {
      this.clearFeedBackItem();
    },

    delFeedBackItem(id) {
      this.$confirm('此操作将删除该条反馈项，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.delData(id);
      }).catch(() => {});
    },

    delData(id) {
      api.delFeedBackItemData({
        params: {
          params: {
            itemId: id,
          },
        },
      }).then((data) => {
        if (data.state === 0) {
          this.$message({
            message: data.message,
            type: 'success',
          });
          if ((this.allDataTotal % this.pageSize === 1) && this.allDataTotal !== 1) {
            this.pageNum = this.pageNum - 1;
          }
          this.getDataPage();
        } else {
          this.$message({
            message: data.message,
            type: 'error',
          });
        }
      });
    },

    searchList() {
      this.pageNum = 1;
      this.getDataPage();
    },

    getAdminCurrentPageList(id) {
      this.pageNum = id;
      this.getDataPage();
    },

    handleSelectionChange(val) {
      this.selectItemTotal = val.length;
      this.multipleSelection = val;
    },
  },

};

</script>

<style scoped>
  .content-container {
    padding: 0 20px;
    background: #fff;
  }

  .content-row {
    overflow: hidden;
  }

  .fl {
    float: left;
  }

  .fr {
    float: right;
  }
  .content-tool {
    padding: 20px;
    border: 1px solid #ebeef5;
    background: #fff;
    font-size: 14px;
    color: #606266;
    overflow: hidden;
  }
  .content-tool--title {
    margin-right: 12px;
    height: 36px;
    line-height: 36px;
    width: 84px;
  }
  .content-tool--left-empty {
    margin-left: 50px;
  }
  .content-tool--select {
    width: 202px;
    height: 36px;
  }
  .content-tool--select input {
    height: 36px;
    line-height: 36px;
  }
  .content-tool--classify-nav {
    width: calc(100% - 142px);
    margin: 0 -11px;
    overflow: hidden;
    height: 42px;
  }
  .content-tool--classify-nav span:first-child {
    margin-left: 0px;
  }
  .content-tool--classify {
    height: 28px;
    line-height: 28px;
    padding: 7px 10px;
    font-size: 14px;
    color: #333;
    margin: 0 11px;
    cursor: pointer;
  }
  .content-tool--classify-selected {
    border-radius: 4px;
    color: #fff;
    background-color: #20a0ff;
  }
  .content-tool--input {
    width: 80%;
    height: 36px;
  }
  .content-tool--input input {
    height: 36px;
    line-height: 36px;
  }
  .content-tool--operate {
    float: left;
  }
  .content-tool--qry {
    width: 80px;
  }
  .content-tool--reset {
    width: 80px;
    margin-left: 10px;
  }
  .content-tool--switch {
    height: 28px;
    line-height: 28px;
    padding: 7px 0px;
    color: #20a0ff;
    cursor: pointer;
  }
  .content-tool--switch i {
    margin-left: 7px;
  }
  .content-tool--operate-h {
    height: 36px;
  }
  .content-row--classify {
    padding: 4px 0 22px 0;
    border-bottom: 1px dashed #ebeef5;
  }
  .content-row--tool-first {
    margin-top: 6px;
  }
  .content-row--operate {
    margin-bottom: 6px;
  }
  .content-row--tool {
    margin-bottom: 20px;
  }

  .set-width {
    width: 100px;
  }

  .set-ellipesd {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .content-tool--classify-nav.content-tool--classify-nav-open {
    height: auto;
  }

  .content-tool--nav {
    float: left;
  }

  .content-tool--switch-lw {
    margin-left: 15px;
    box-sizing: border-box;
  }
  .content-operate {
    padding: 20px 0 17px;
    overflow: hidden;
  }
  .content-operate--add {
    width: 80px;
    float: left;
  }
  .content-operate--batch {
    float: left;
  }
  .content-operate .more {
    float: left;
    width: 100px;
    height: 36px;
    background: #fff;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
    color: #606266;
    font-size: 14px;
    margin-left: 10px;
  }
  .content-operate .more .more-span {
    margin: 7px 0;
  }
  .content-operate .more i {
    margin-left: 3px;
    color: #c9c9c9;
  }
  .table-record {
    float: right;
    font-size: 14px;
    color: #606266;
    height: 36px;
    line-height: 36px;
  }
  .table-record--selected {
    color: #20A0FF;
  }
  .edit-operation {
    color: #20A0FF;
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;
    border-left: 1px solid #EBEEF5;
    cursor: pointer;
  }
  .edit-operation:first-child {
    padding-left: 0px;
    padding-right: 10px;
    border-left: 0px solid #EBEEF5;
  }
  .edit-operation:last-child {
    padding-left: 10px;
    padding-right: 0px;
  }
  .tag-home, .tag-comp {
    width: 48px;
    height: 24px;
    border-radius: 4px;
    text-align: center;
  }
  .tag-home {
    background: #E8F5FF;
    border: 1px solid #BFE4FF;
    color: #20A0FF;
  }
  .tag-comp {
    background: #EEF7EA;
    border: 1px solid #C1E2B2;
    color: #5BB531;
  }
  .block {
    float: right;
    margin-left: -5px;
    margin-top: 20px;
  }
</style>