表格-多层级表头-带分页-带文字提示-带弹框

表格-多层级表头-带分页-带文字提示-带弹框

图例

格式

1、按钮-带弹框

 <div>
      <div class="a">结果汇总列表</div>
      <div class="a-a">
        <div>
          <el-button style="margin-bottom:10px">确认评价结果</el-button>
        </div>
        <div>
          <el-button type="primary" @click="dialogVisibleQ = true">确定最终报告</el-button>
          <el-dialog
            style="margin-top: 20vh;"
            title="确定最终报告"
            :visible.sync="dialogVisibleQ"
            width="30%"
            :before-close="handleClose"
            center
            :append-to-body="true"
          >
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisibleQ = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisibleQ = false">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>

数据

data() {
      return {
        dialogVisibleQ: false,
      };
},
//可不要
methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
}

2、表格

    <div>
      <div class="a">结果汇总列表</div>
      <div class="a-a">
        <div>
          <el-button style="margin-bottom:10px">确认评价结果</el-button>
        </div>
        <div>
          <el-button type="primary" @click="dialogVisibleQ = true">确定最终报告</el-button>
          <el-dialog
            style="margin-top: 20vh;"
            title="确定最终报告"
            :visible.sync="dialogVisibleQ"
            width="30%"
            :before-close="handleClose"
            center
            :append-to-body="true"
          >
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisibleQ = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisibleQ = false">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
    <div>
      <el-table
        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        border
        style="width: 100%"
      >
          // fixed="left" 固定列和表头,默认为左
        <el-table-column fixed prop="count" label="排名" width="60"></el-table-column>
        <el-table-column fixed prop="fraction" label="汇总分数" width="60"></el-table-column>
        <el-table-column fixed="left" prop="grade" label="等级" width="60"></el-table-column>
        <el-table-column fixed="left" prop="date" label="部门" width="120"></el-table-column>
        <el-table-column fixed="left" prop="address" label="部门负责人" width="120"></el-table-column>
          //只需要在 el-table-column 里面嵌套 el-table-column，就可以实现    多级表头。
          // header-align="center"  表头对齐方式-居中
        <el-table-column label="一、合程性指标（60%）" header-align="center">
          <el-table-column prop="nameA" label="1、是否具备理念（10分）" >
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="这里展示问题内容作为辅助显示" placement="top">
                <!-- <el-input v-model="tableData.name" placeholder="请输入"></el-input> -->

                <span
                  style="color:red;"
                  class="cor"
                  @click="dialogVisibleP = true"
                >{{scope.row.nameA}}</span>
              </el-tooltip>
            </template>
          </el-table-column>

          <!-- <el-table-column prop="nameA" label="1、是否具备理念（10分）" width="120"></el-table-column> -->
          <el-table-column prop="nameB" label="2、是否具备体系（5分）" width="120"></el-table-column>
          <el-table-column prop="nameC" label="3、是否掌握标准（5分）" width="120"></el-table-column>
          <el-table-column prop="nameD" label="4、是否实时关注业务（10分）" width="120"></el-table-column>
          <el-table-column prop="nameE" label="5、是否积极参加培训（10分）" width="120"></el-table-column>
          <el-table-column prop="nameF" label="6、是否掌握知识（10分）" width="120"></el-table-column>
          <el-table-column prop="nameG" label="7、是否保持有效的沟通与配合机制（5分）" width="120"></el-table-column>
          <el-table-column
            prop="nameH"
            label="8、专员的资质、任命、素质、工作开展情况等各项条件，是否符合公司制度要求（5分）"
            width="120"
          ></el-table-column>
        </el-table-column>
        <el-table-column label="二、结果性指标（40%）" header-align="center">
          <el-table-column label="9" header-align="center">
            <el-table-column prop="countA" label="市场部门：是否存在的情况（20分）" width="120"></el-table-column>
            <el-table-column prop="countB" label="另类部门：是否存在情形（20分）" width="120"></el-table-column>
            <el-table-column prop="countC" label="销售部门：是否存在情形（20分）" width="120"></el-table-column>
            <el-table-column
              prop="countD"
              label="产品客服部门：是否存在情形（20分）"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="countE"
              label="中后台部门：是否确保要求（20分）"
              width="120"
            ></el-table-column>
          </el-table-column>
          <el-table-column prop="gradeA" label="10、是否存在其他违规情形（5分）" width="80"></el-table-column>
          <el-table-column prop="gradeB" label="11、是否存在其他违规情形（5分）" width="80"></el-table-column>
          <el-table-column prop="gradeC" label="12、是否存在情形（5分）" width="80"></el-table-column>
          <el-table-column prop="gradeD" label="13、是否存在情形（5分）" width="80"></el-table-column>
        </el-table-column>
        <el-table-column label="三、否定性指标">
          <el-table-column
            prop="fractionA"
            label="14、本部门是否存在等"
            width="120"
          ></el-table-column>
        </el-table-column>
        <el-table-column label="四、其他加减分">
          <el-table-column
            prop="fractionB"
            label="15.在业务活动中开展的各项调研/检查活动等"
            width="150"
          ></el-table-column>
        </el-table-column>
      </el-table>
      <div class="pag">
        <!-- <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination> -->
        <el-pagination
          small
          layout="total,prev,pager,next,jumper"
          :total="tableData.length"
          :page-size="pagesize"
          :current-page="currentPage"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      style="margin-top: 17vh;"
      title="修改评分"
      :visible.sync="dialogVisibleP"
      width="30%"
      :before-close="handleClose"
      center
      :append-to-body="true"
    >
      <el-form ref="formV" :model="formV" label-width="80px">
        <div style="margin-bottom:8px">评分(必填)</div>
        <el-input v-model="formV.name" width="100%" placeholder="请输入"></el-input>
      </el-form>
      <el-form ref="formV" :model="formV" label-width="80px">
        <div style="margin-bottom:8px;margin-top:18px">评分理由</div>
        <el-input type="textarea" v-model="formV.region" placeholder="请输入"></el-input>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleP = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleP = false">确 定</el-button>
      </span>
    </el-dialog>

数据

data() {
    return {
      // 表格
      tableData: [
        {
          count: "1",
          grade: "5",
          nameA: "4.78",
          nameB: "4.78",
          nameC: "4.78",
          nameD: "4.78",
          nameE: "4.78",
          nameF: "4.78",
          nameG: "4.78",
          nameH: "4.78",
          countA: "18.6",
          countB: "18.6",
          countC: "18.6",
          countD: "18.6",
          countE: "18.6",
          gradeA: "3.69",
          gradeB: "3.69",
          gradeC: "3.69",
          gradeD: "3.69",
          date: "基础一部",
          name: "一、合性指标-1",
          fraction: "142",
          fractionA: "6.82",
          fractionB: "5.69",
          address: "唐僧",
        },
        {
          count: "2",
          grade: "7",
          nameA: "4.78",
          nameB: "4.78",
          nameC: "4.78",
          nameD: "4.78",
          nameE: "4.78",
          nameF: "4.78",
          nameG: "4.78",
          nameH: "4.78",
          countA: "18.6",
          countB: "18.6",
          countC: "18.6",
          countD: "18.6",
          countE: "18.6",
          gradeA: "3.69",
          gradeB: "3.69",
          gradeC: "3.69",
          gradeD: "3.69",
          date: "移动部",
          name: "一、合性指标-2",
          fraction: "2545",
          fractionA: "6.82",
          fractionB: "5.69",
          address: "孙悟空",
        },
        {
          count: "3",
          grade: "552",
          nameA: "4.78",
          nameB: "4.78",
          nameC: "4.78",
          nameD: "4.78",
          nameE: "4.78",
          nameF: "4.78",
          nameG: "4.78",
          nameH: "4.78",
          countA: "18.6",
          countB: "18.6",
          countC: "18.6",
          countD: "18.6",
          countE: "18.6",
          gradeA: "3.69",
          gradeB: "3.69",
          gradeC: "3.69",
          gradeD: "3.69",
          date: "财务部",
          name: "一、合性指标-3",
          fraction: "38787",
          fractionA: "6.82",
          fractionB: "5.69",
          address: "猪八戒",
        },
        {
          count: "4",
          grade: "25",
          nameA: "4.78",
          nameB: "4.78",
          nameC: "4.78",
          nameD: "4.78",
          nameE: "4.78",
          nameF: "4.78",
          nameG: "4.78",
          nameH: "4.78",
          countA: "18.6",
          countB: "18.6",
          countC: "18.6",
          countD: "18.6",
          countE: "18.6",
          gradeA: "3.69",
          gradeB: "3.69",
          gradeC: "3.69",
          gradeD: "3.69",
          date: "总裁办",
          name: "一、合性指标-5",
          fraction: "443",
          fractionA: "6.82",
          fractionB: "5.69",
          address: "沙僧",
        },
        {
          count: "5",
          grade: "555",
          nameA: "4.78",
          nameB: "4.78",
          nameC: "4.78",
          nameD: "4.78",
          nameE: "4.78",
          nameF: "4.78",
          nameG: "4.78",
          nameH: "4.78",
          countA: "18.6",
          countB: "18.6",
          countC: "18.6",
          countD: "18.6",
          countE: "18.6",
          gradeA: "3.69",
          gradeB: "3.69",
          gradeC: "3.69",
          gradeD: "3.69",
          date: "移动部",
          name: "一、合性指标-6",
          fraction: "5543",
          fractionA: "6.82",
          fractionB: "5.69",
          address: "小白龙",
        },
        {
          count: "6",
          grade: "55",
          nameA: "4.78",
          nameB: "4.78",
          nameC: "4.78",
          nameD: "4.78",
          nameE: "4.78",
          nameF: "4.78",
          nameG: "4.78",
          nameH: "4.78",
          countA: "18.6",
          countB: "18.6",
          countC: "18.6",
          countD: "18.6",
          countE: "18.6",
          gradeA: "3.69",
          gradeB: "3.69",
          gradeC: "3.69",
          gradeD: "3.69",
          date: "2016-05-04",
          name: "已提交",
          fraction: "676",
          fractionA: "6.82",
          fractionB: "5.69",
          address: "如来",
        },
      ],
      // 分页
      pagesize: 5,
      currentPage: 1,
    };
 },

方法

  methods: {
    // 分页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleClick(row) {
      console.log(row);
    },
//弹框
    // handleClose(done) {
    //   this.$confirm("确认关闭？")
    //     .then((_) => {
    //       done();
    //     })
    //     .catch((_) => {});
    // },
  },

样式

.a {
  display: inline-block;
  height: 24px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
  line-height: 24px;
  margin-top: 12px;
  margin-bottom: 24px;
  font-weight: 700;
}
.a-a {
  display: inline-block;
  width: 100px;
  float: right;
  margin-right: 25px;
  margin-top: -40px;
}
/deep/.el-table th,
.el-table tr {
  background: rgba(244, 245, 247, 1);
}
.pag {
  margin-top: 24px;
}
//分页靠右
.el-pagination {
  float: right;
}
.cor {
 //小手指示
  cursor: pointer;
}