统一table操作按钮样式

zhanghua

2023-02-09 bf9a412b20afe9f22e99448eb002ff9e92fd30cb

 src/views/operate/myWait/index.vue

@@ -16,13 +16,19 @@
      <div class="mainContent">
        <!-- 数据展示 -->
        <el-table
            border
            stripe
            ref="multipleTable" :header-cell-style="{
          'background':'#F5F5F5',
          'font-weight': '650',
          'line-height': '45px',
        }" :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" @selection-change="tableChange">
          border
          stripe
          ref="multipleTable"
          :header-cell-style="{
            background: '#F5F5F5',
            'font-weight': '650',
            'line-height': '45px',
          }"
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName"
          @selection-change="tableChange"
        >
          <el-table-column type="selection" min-width="5"> </el-table-column>
          <el-table-column prop="code" label="事件编号" min-width="10">
          </el-table-column>
@@ -52,11 +58,25 @@
          <el-table-column min-width="10"> </el-table-column>
        </el-table>
        <!-- 查看修改页面 -->
        <el-dialog :visible.sync="dialogUpdate" width="60%" :title="title" :destroy-on-close="true" :key="updateFlag"
          :before-close="handleClose">
          <component v-if="dialogUpdate" @closeDialog="changeDialog" @changeDialog="changeDialog"
            v-bind:is="currentTabComponent" :caseId="caseId" :id="caseId" :mycode="caseCode" :info="info"
            :vioData="vioData"></component>
        <el-dialog
          :visible.sync="dialogUpdate"
          width="60%"
          :title="title"
          :destroy-on-close="true"
          :key="updateFlag"
          :before-close="handleClose"
        >
          <component
            v-if="dialogUpdate"
            @closeDialog="changeDialog"
            @changeDialog="changeDialog"
            v-bind:is="currentTabComponent"
            :caseId="caseId"
            :id="caseId"
            :mycode="caseCode"
            :info="info"
            :vioData="vioData"
          ></component>
          <!-- <updateUser
            v-if="dialogUpdate"
            :updateFlag="updateFlag"
@@ -69,22 +89,41 @@
        <div class="tools">
          <div class="funs">
            <div class="funsItem">
              <el-checkbox v-model="all" @change="selectAll()">全选</el-checkbox>
              <el-checkbox v-model="all" @change="selectAll()"
                >全选</el-checkbox
              >
            </div>
            <div class="funsItem">
              <el-checkbox v-model="unsame" @change="disSame(tableData)">反选</el-checkbox>
              <el-checkbox v-model="unsame" @change="disSame(tableData)"
                >反选</el-checkbox
              >
            </div>
            <div class="funsItem">
              <el-select v-model="myIdx" placeholder="批量操作" @change="selectChange">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                  :disabled="item.disabled">
              <el-select
                v-model="myIdx"
                placeholder="批量操作"
                @change="selectChange"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="pagination">
            <el-pagination background :current-page="currentPage" layout="prev, pager, next" :total="totalNum"
              :page-size="pageSize" @current-change="changeCurrentPage">
            <el-pagination
              background
              :current-page="currentPage"
              layout="prev, pager, next"
              :total="totalNum"
              :page-size="pageSize"
              @current-change="changeCurrentPage"
            >
            </el-pagination>
          </div>
        </div>
@@ -167,7 +206,11 @@
  methods: {
    getTableData() {
      myWait
        .getMybackLog({ num: this.context, current: this.currentPage, pageSize: this.pageSize })
        .getMybackLog({
          num: this.context,
          current: this.currentPage,
          pageSize: this.pageSize,
        })
        .then(({ records, total }) => {
          this.tableData = records;
          this.tableData = this.tableData.filter((item) => !!item);
@@ -177,7 +220,7 @@
    },

    // 批量删除
    mulDelete(idArr) { },
    mulDelete(idArr) {},
    // 执行下拉框操作
    selectChange(val) {
      let ids = [];
@@ -211,7 +254,7 @@
      });
    },
    // 删除单条数据
    handleDelete({ number }) { },
    handleDelete({ number }) {},
    // 设置表格斑马纹
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
@@ -237,7 +280,7 @@
          this.dialogUpdate = false;
          done();
        })
        .catch(() => { });
        .catch(() => {});
    },
    // 计算时间
    getRestTime(time2) {
@@ -389,7 +432,7 @@
          line-height: 28px;
          display: flex;
          align-items: center;
          border: 1px solid #DCDFE6;
          border: 1px solid #dcdfe6;
          border-radius: 4px;
          font-size: 12px;
          margin-left: 10px;
@@ -425,7 +468,6 @@
        justify-content: center;

        .el-pagination {

          &::v-deep li,
          &::v-deep .btn-prev,
          &::v-deep .btn-next {
@@ -461,11 +503,11 @@

      .operation {
        display: flex;

        color: var(--operation-color);
        .line {
          padding: 0 5px;
        }

        color: var(--operation-color);
        span:hover {
          cursor: pointer;
        }