关于vue.js:用element开发一个复杂表格

40次阅读

共计 9486 个字符，预计需要花费 24 分钟才能阅读完成。

先上原型图，用 element 制作一个相似这样的表格，刚开始想的是用一个表格去实现，然而 … 想多了，最初用多个表格沉积实现，（注：只关注表格实现，表格中所有数据都是捏造的。）

1、客户根本信息表格

此表格次要做以下操作，1、删除生成表格的第一行空表格（为什么会有空行，还没明确，有晓得的搭档能够留言告知），2、合并客户名称值的列，3、将客户名称值字段靠左显示 

<el-table
    :data="tableData"
    size="mini"
    class="mt10 tableBaseInfo"
    :header-row-class-name="hiddenHeaderRow"
    :span-method="arraySpanMethod1"
    :cell-class-name="setTextLeft"
  >
    <el-table-column label="客户根本信息" align="center">
      <el-table-column prop="name" align="center"></el-table-column>
      <el-table-column prop="nameValue" align="center"></el-table-column>
      <el-table-column prop="month" align="center"></el-table-column>
      <el-table-column prop="monthValue" align="center"></el-table-column>
    </el-table-column>
  </el-table>

    export default {data() {
            return {
                tableData: [
                  {
                    name: "客户名称",
                    nameValue: "测试 1",
                    month: "",
                    monthValue: "",
                  },
                  {
                    name: "客户户号",
                    nameValue: "123456789",
                    month: "结算月份",
                    monthValue: "2",
                  },
                ],
            }
        },
        methods: {
            // 暗藏表格空的行 -- 这块的起因还没搞清楚，生成的表格会有一行是空的
            hiddenHeaderRow({rowIndex}) {if (rowIndex == 1) {
                // 暗藏第二行
                return "hiddenClass";
              }
            },
            // 合并客户根本信息表格客户名称单元格
            arraySpanMethod1({rowIndex, columnIndex}) {if (rowIndex == 0) {if (columnIndex != 0) {return [1, 3];
                }
              }
            },
            // 设置客户根本信息表格客户名称靠左显示
            setTextLeft({rowIndex, columnIndex}) {if (rowIndex == 0) {if (columnIndex != 0) {return "textAlignLeft";}
              }
            },
        }
    }

2、客户电量电费信息表格

这个表格和失常表格一样开发就行，只是最初一行是字体加粗，色彩有设置，在 table 上增加:cell-class-name=”setTextWeight” 属性，在办法中对 setTextWeight 进行设置即可，而后设置 text-set 款式即可。

// 设置客户电量电费信息中批发交易电费加粗显示
setTextWeight({rowIndex, columnIndex}) {if (rowIndex == 10) {return "text-set";}
},

3、客户偏差考核信息

操作：1、合并单元格，2、文案靠右显示 

// 设置第一档和第二档正偏差电价、负偏差电价靠右显示
setTextRight({rowIndex, columnIndex}) {if (rowIndex == 1 || rowIndex == 4) {if (columnIndex != 0) {return "textAlignRight";}
  }
},
// 设置第一档和第二档正偏差电价、负偏差电价合并单元格
arraySpanMethod2({rowIndex, columnIndex}) {
  // 示意行数，不蕴含表头行数
  if (rowIndex == 1 || rowIndex == 4) {
    // 去掉第一列之后的所有列进行合并
    if (columnIndex != 0) {return [1, 4];
    }
  }
},

4、客户其他费用
操作：1、合并单元格，2、文案靠左显示，3、文案色彩，宽度设置 

// 合并客户其他费用中最初两行
arraySpanMethod3({rowIndex, columnIndex}) {if (rowIndex == 4 || rowIndex == 5) {return [1, 4];
  }
},
// 设置客户其他费用中最初两行字体加粗
setCustomTextLeft({rowIndex, columnIndex}) {if (rowIndex == 4 || rowIndex == 5) {return "textCustomAlignLeft";}
},

大部分都是进行单元格合并和文案设置，element 有提供对应的属性和办法。看看效果图，页面太长，分两张截图展现：


基本上和要求的表格差不多了，大家有好的实现计划能够告知我，我也学习下，下次就不必搞这么多 table 了，以下附上源码，

    <el-table
        :data="tableData"
        size="mini"
        class="mt10 tableBaseInfo"
        :header-row-class-name="hiddenHeaderRow"
        :span-method="arraySpanMethod1"
        :cell-class-name="setTextLeft"
      >
        <el-table-column label="客户根本信息" align="center">
          <el-table-column prop="name" align="center"></el-table-column>
          <el-table-column prop="nameValue" align="center"></el-table-column>
          <el-table-column prop="month" align="center"></el-table-column>
          <el-table-column prop="monthValue" align="center"></el-table-column>
        </el-table-column>
      </el-table>
      <el-table
        :data="tableData1"
        size="mini"
        class="no-header-only"
        :cell-class-name="setTextWeight"
      >
        <el-table-column label="客户电量电费信息" align="center">
          <el-table-column
            prop="name"
            align="center"
            lable=""
          ></el-table-column>
          <el-table-column
            prop="sharpVal"
            align="center"
            label="尖峰"
          ></el-table-column>
          <el-table-column
            prop="peakVal"
            align="center"
            label="顶峰"
          ></el-table-column>
          <el-table-column
            prop="valleyVal"
            align="center"
            label="低谷"
          ></el-table-column>
          <el-table-column
            prop="fixedVal"
            align="center"
            label="一口价"
          ></el-table-column>
          <el-table-column
            prop="total"
            align="center"
            label="总计"
          ></el-table-column>
        </el-table-column>
      </el-table>
      <el-table size="mini" class="no-data">
        <el-table-column label="客户偏差考核信息" align="center">
        </el-table-column>
      </el-table>
      <el-table
        :data="tableData2"
        size="mini"
        class="firstAppraisal no-header-only"
        :span-method="arraySpanMethod2"
        :cell-class-name="setTextRight"
      >
        <el-table-column label="(第一档偏差考核)" align="center">
          <el-table-column
            prop="name"
            align="center"
            lable=""
          ></el-table-column>
          <el-table-column
            prop="sharpVal"
            align="center"
            label="尖峰"
          ></el-table-column>
          <el-table-column
            prop="peakVal"
            align="center"
            label="顶峰"
          ></el-table-column>
          <el-table-column
            prop="valleyVal"
            align="center"
            label="低谷"
          ></el-table-column>
          <el-table-column
            prop="fixedVal"
            align="center"
            label="一口价"
          ></el-table-column>
        </el-table-column>
      </el-table>
      <el-table
        :data="tableData3"
        size="mini"
        class="firstAppraisal no-header-only"
        :span-method="arraySpanMethod2"
        :cell-class-name="setTextRight"
      >
        <el-table-column label="(第二档偏差考核)" align="center">
          <el-table-column
            prop="name"
            align="center"
            lable=""
          ></el-table-column>
          <el-table-column
            prop="sharpVal"
            align="center"
            label="尖峰"
          ></el-table-column>
          <el-table-column
            prop="peakVal"
            align="center"
            label="顶峰"
          ></el-table-column>
          <el-table-column
            prop="valleyVal"
            align="center"
            label="低谷"
          ></el-table-column>
          <el-table-column
            prop="fixedVal"
            align="center"
            label="一口价"
          ></el-table-column>
        </el-table-column>
      </el-table>
      <el-table size="mini" class="no-header" :data="tableData4" border>
        <el-table-column label=""align="center"prop="positionVal">
          <template slot-scope="scope">
            <span class="text-set"
              > 正偏差费用: {{scope.row.positionVal}}</span
            >
          </template>
        </el-table-column>
        <el-table-column label=""align="center"prop="nagitiveVal">
          <template slot-scope="scope">
            <span class="text-set"
              > 负偏差费用: {{scope.row.nagitiveVal}}</span
            >
          </template>
        </el-table-column>
        <el-table-column label=""align="center"prop="totalVal">
          <template slot-scope="scope">
            <span class="text-set"> 共计: {{scope.row.totalVal}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        :data="tableData5"
        size="mini"
        class="tableBaseInfo no-header-only"
        :span-method="arraySpanMethod3"
        :header-cell-style="{'text-align':'center'}"
        :header-row-class-name="hiddenHeaderRow"
        :cell-class-name="setCustomTextLeft"
      >
        <el-table-column label="客户其他费用（含月度服务费及超用服务费）">
          <el-table-column prop="name1" align="center"></el-table-column>
          <el-table-column prop="value1" align="center"></el-table-column>
          <el-table-column prop="name2" align="center"></el-table-column>
          <el-table-column prop="value2" align="center"></el-table-column>
        </el-table-column>
      </el-table>
export default {data() {
    return {
      tableData: [
        {
          name: "客户名称",
          nameValue: "xxxxxx",
          month: "",
          monthValue: "",
        },
        {
          name: "客户户号",
          nameValue: "123456",
          month: "结算月份",
          monthValue: "2",
        },
      ],
      tableData1: [
        {
          name: "理论用电量",
          sharpVal: "1",
          peakVal: "1",
          valleyVal: "1",
          fixedVal: "1",
          total: "1",
        },
        {
          name: "年度交易电量",
          sharpVal: "2",
          peakVal: "2",
          valleyVal: "2",
          fixedVal: "2",
          total: "2",
        },
        {
          name: "年度交易电价",
          sharpVal: "2",
          peakVal: "2",
          valleyVal: "2",
          fixedVal: "2",
          total: "2",
        },
        {
          name: "年度交易电费",
          sharpVal: "2",
          peakVal: "2",
          valleyVal: "2",
          fixedVal: "2",
          total: "2",
        },
        {
          name: "月度交易电量",
          sharpVal: "2",
          peakVal: "2",
          valleyVal: "2",
          fixedVal: "2",
          total: "2",
        },
        {
          name: "月度交易电价",
          sharpVal: "2",
          peakVal: "2",
          valleyVal: "2",
          fixedVal: "2",
          total: "2",
        },
        {
          name: "月度交易电费",
          sharpVal: "2",
          peakVal: "2",
          valleyVal: "2",
          fixedVal: "2",
          total: "2",
        },
        {
          name: "超用电量",
          sharpVal: "2",
          peakVal: "2",
          valleyVal: "2",
          fixedVal: "2",
          total: "2",
        },
        {
          name: "超用电价",
          sharpVal: "2",
          peakVal: "2",
          valleyVal: "2",
          fixedVal: "2",
          total: "2",
        },
        {
          name: "超用电费",
          sharpVal: "2",
          peakVal: "2",
          valleyVal: "2",
          fixedVal: "2",
          total: "2",
        },
        {
          name: "批发交易电费",
          sharpVal: "3",
          peakVal: "3",
          valleyVal: "3",
          fixedVal: "3",
          total: "3",
        },
      ],
      tableData2: [
        {
          name: "正偏差电量",
          sharpVal: "1",
          peakVal: "1",
          valleyVal: "1",
          fixedVal: "1",
        },
        {
          name: "正偏差电价",
          sharpVal: "2 元 / 千瓦时",
          peakVal: "",
          valleyVal: "",
          fixedVal: "",
        },
        {
          name: "正偏差电费",
          sharpVal: "3",
          peakVal: "3",
          valleyVal: "3",
          fixedVal: "3",
        },
        {
          name: "负偏差电量",
          sharpVal: "1",
          peakVal: "1",
          valleyVal: "1",
          fixedVal: "1",
        },
        {
          name: "负偏差电价",
          sharpVal: "2 元 / 千瓦时",
          peakVal: "",
          valleyVal: "",
          fixedVal: "",
        },
        {
          name: "负偏差电费",
          sharpVal: "3",
          peakVal: "3",
          valleyVal: "3",
          fixedVal: "3",
        },
      ],
      tableData3: [
        {
          name: "正偏差电量",
          sharpVal: "1",
          peakVal: "1",
          valleyVal: "1",
          fixedVal: "1",
        },
        {
          name: "正偏差电价",
          sharpVal: "2 元 / 千瓦时",
          peakVal: "",
          valleyVal: "",
          fixedVal: "",
        },
        {
          name: "正偏差电费",
          sharpVal: "3",
          peakVal: "3",
          valleyVal: "3",
          fixedVal: "3",
        },
        {
          name: "负偏差电量",
          sharpVal: "1",
          peakVal: "1",
          valleyVal: "1",
          fixedVal: "1",
        },
        {
          name: "负偏差电价",
          sharpVal: "2 元 / 千瓦时",
          peakVal: "",
          valleyVal: "",
          fixedVal: "",
        },
        {
          name: "负偏差电费",
          sharpVal: "3",
          peakVal: "3",
          valleyVal: "3",
          fixedVal: "3",
        },
      ],
      tableData4: [
        {
          positionVal: "200.03",
          nagitiveVal: "300.05",
          totalVal: "500.09",
        },
      ],
      tableData5: [
        {
          name1: "月度服务费价格（分）",
          value1: "0.5",
          name2: "超用服务费价格（分）",
          value2: "0.5",
        },
        {
          name1: "月度服务费电量",
          value1: "0",
          name2: "超用服务费电量",
          value2: "12345",
        },
        {
          name1: "月度服务费电费",
          value1: "0.5",
          name2: "超用服务费电费",
          value2: "27.95",
        },
        {
          name1: "损益电费",
          value1: "0.5",
          name2: "",
          value2: "",
        },
        {
          name1: "客户其他费用共计：54.05",
          value1: "",
          name2: "",
          value2: "",
        },
        {
          name1: "客户总电费共计：38540.11",
          value1: "",
          name2: "",
          value2: "",
        },
      ],
    };
  },
  methods: {
      // 暗藏表格空的行
      hiddenHeaderRow({rowIndex}) {if (rowIndex == 1) {
          // 暗藏第二行
          return "hiddenClass";
        }
      },
      // 合并客户根本信息表格客户名称单元格
      arraySpanMethod1({rowIndex, columnIndex}) {if (rowIndex == 0) {if (columnIndex != 0) {return [1, 3];
          }
        }
      },
      // 设置客户根本信息表格客户名称靠左显示
      setTextLeft({rowIndex, columnIndex}) {if (rowIndex == 0) {if (columnIndex != 0) {return "textAlignLeft";}
        }
      },
      // 设置客户电量电费信息中批发交易电费加粗显示
      setTextWeight({rowIndex, columnIndex}) {if (rowIndex == 10) {return "text-set";}
      },
      // 设置第一档和第二档正偏差电价、负偏差电价靠右显示
      setTextRight({rowIndex, columnIndex}) {if (rowIndex == 1 || rowIndex == 4) {if (columnIndex != 0) {return "textAlignRight";}
        }
      },
      // 设置第一档和第二档正偏差电价、负偏差电价合并单元格
      arraySpanMethod2({rowIndex, columnIndex}) {
        // 示意行数，不蕴含表头行数
        if (rowIndex == 1 || rowIndex == 4) {
          // 去掉第一列之后的所有列进行合并
          if (columnIndex != 0) {return [1, 4];
          }
        }
      },
      // 合并客户其他费用中最初两行
      arraySpanMethod3({rowIndex, columnIndex}) {if (rowIndex == 4 || rowIndex == 5) {return [1, 4];
        }
      },
      // 设置客户其他费用中最初两行字体加粗
      setCustomTextLeft({rowIndex, columnIndex}) {if (rowIndex == 4 || rowIndex == 5) {return "textCustomAlignLeft";}
      },
    },
}
<style lang="scss" scoped>
::v-deep .tableBaseInfo {
  .hiddenClass {display: none !important;}
  .textAlignLeft {text-align: left !important;}
  .textCustomAlignLeft {
    text-align: left !important;
    font-weight: 700;
    color: #000;
  }
}
::v-deep .no-data .el-table__body-wrapper {display: none;}
::v-deep .firstAppraisal .textAlignRight {text-align: right !important;}
::v-deep .no-header.el-table--border {border-top: none !important;}
::v-deep .no-header .el-table__header-wrapper {display: none;}
::v-deep .no-header-only.el-table--border {border-top: none !important;}
::v-deep .text-set {
  color: #000;
  font-weight: 700;
}
::v-deep .el-table::before {height: 0;}
</style>

正文完
vue.js
发表至： vue.js
2022-04-08
 0
关于vue.js:vue-简单指令使用实现记事本案例
关于vue.js:vuetreeselect遇到的坑
关于vue.js:vhtml富文本内容如何触发预览图片功能
关于vue.js:从零开始搭建Vue20项目一之快速开始