element-ui table 合并单元格--合并行和列

已于 2022-04-15 14:29:05 修改
阅读量1.2k 收藏 4
点赞数
分类专栏： vue 前端开发 文章标签： javascript
于 2021-11-17 18:19:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ingenuou_/article/details/121384471
版权

element-ui table 合并单元格--合并行和列

在这里插入图片描述

1.合并单元格

<template>
  <div>
    <div class="preview app-container" ref="preview">
      <el-table :data="tableData" height="500" :header-cell-style="handerMethod" :span-method="objectSpanMethod" border fit highlight-current-row style="margin-top: 10px;" :cell-class-name="tableRowClassName"
        @cell-mouse-leave="cellMouseLeave"  @cell-mouse-enter="cellMouseEnter">
        <el-table-column prop='firstRisk' label='一级风险' align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop='secRisk' label='二级风险' align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop='' label='预警指标' align="center" :show-overflow-tooltip="true">
          <el-table-column label="" prop='earlyWarning' align="center">
          </el-table-column>
          <el-table-column label="" align="center" prop="type"></el-table-column>
        </el-table-column>
        <el-table-column prop='description' label='期末' align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop='status' label='季度' align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop='status' label='同比增减率' align="center" :show-overflow-tooltip="true"></el-table-column>
         <el-table-column prop='status' label='备注' align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop='status' label='说明' align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop='ISstatus' label='是否为风险' align="center" :show-overflow-tooltip="true"></el-table-column>
         <el-table-column prop='status' label='环比增减率' align="center" :show-overflow-tooltip="true"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
// import PopupTreeInput from "./PopupTreeInput.vue";
export default {
  name: "preview",
  // import引入的组件需要注入到对象中才能使用PopupTreeInput
  components: {},
  props: [""],
  data() {
    // 这里存放数据
    return {
      tableData: [
        {
          firstRisk: "战略风险",
          secRisk: "宏观经济风险",
          earlyWarning: "国内外宏观经济",
          type: "国内外宏观经济",
          description: "-",
          ISstatus: "是",
        },
        {
          firstRisk: "战略风险",
          secRisk: "政策风险",
          earlyWarning: "国家及行业",
          type: "国家及行业",
          description: "-",
          ISstatus: "是",
        },
        {
          firstRisk: "战略风险",
          secRisk: "国际化经营风险",
          earlyWarning:
            "受关税政策影响的子企业数量（个）",
          type: "受关税政策影响的子企业数量（个）",
          description: "-",
          ISstatus: "是",
        },
        {
          firstRisk: "战略风险",
          secRisk: "国际化经营风险",
          earlyWarning: "境外中高风险地区境外资产总额",
          type: "金额（万元）",
          description: "-",
          ISstatus: "是",
        },
        {
          firstRisk: "战略风险",
          secRisk: "国际化经营风险",
          earlyWarning: "境外中高风险地区境外资产总额",
          type: "占比总额比重",
          description: "-",
          ISstatus: "是",
        },
        {
          firstRisk: "战略风险",
          secRisk: "国际化经营风险",
          earlyWarning: "项目逾期数量（个）",
          type: "项目逾期数量（个）",
          description: "-",
          ISstatus: "是",
        },
        {
          firstRisk: "战略风险",
          secRisk: "国际化经营风险",
          earlyWarning: "境外重大法律诉讼案件",
          type: "数量（个）",
          description: "-",
          ISstatus: "是",
        },
        {
          firstRisk: "战略风险",
          secRisk: "国际化经营风险",
          earlyWarning: "境外重大法律诉讼案件",
          type: "涉案金额（万元）",
          description: "-",
          ISstatus: "是",
        },

        {
          firstRisk: "战略风险",
          secRisk: "科技创新风险",
          earlyWarning: "科研投入",
          type: "金额（万元）",
          description: "-",
          ISstatus: "是",
        },
        {
          firstRisk: "战略风险",
          secRisk: "科技创新风险",
          earlyWarning: "科研投入",
          type: "占总收入比重",
          description: "-",
          ISstatus: "是",
        },
      ],
      oneNameArr: [],
      oneNamePos: 0,
      twoNameArr: [],
      twoNamePos: 0,
      threeNameArr: [],
      threeNamePos: 0,
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    test: {
      deep: true, // deep: true  // 可以深度检测到 test 对象的属性值的变化
      handler(newV) {
        this.test = newV;
      },
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.merage();
  },
  // 方法集合
  methods: {
    //隐藏表头
    handerMethod({ rowIndex }) {
      // background: 'rgb(242, 242, 242)';
      if (rowIndex === 1) {
        //这里为了是将第二列的表头隐藏，就形成了合并表头的效果
        return { display: "none" };
      } else {
        return { background: "rgb(242, 242, 242)" };
      }
    },
    merageInit() {
      this.oneNameArr = [];
      this.oneNamePos = 0;
      this.twoNameArr = [];
      this.twoNamePos = 0;
      this.threeNameArr = [];
      this.threeNamePos = 0;
    },
    merage() {
      this.merageInit();
      for (let i = 0; i < this.tableData.length; i += 1) {
        if (i === 0) {
          // 第一行必须存在
          this.oneNameArr.push(1);
          this.oneNamePos = 0;
          this.twoNameArr.push(1);
          this.twoNamePos = 0;
          this.threeNameArr.push(1);
          this.threeNamePos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同,eg：this.oneNamePos 是 this.oneNameArr序号
          // 第一列
          // eslint-disable-next-line no-lonely-if
          if (this.tableData[i].firstRisk === this.tableData[i - 1].firstRisk) {
            this.oneNameArr[this.oneNamePos] += 1;
            this.oneNameArr.push(0);
          } else {
            this.oneNameArr.push(1);
            this.oneNamePos = i;
          }
          // 第二列
          if (
            this.tableData[i].secRisk === this.tableData[i - 1].secRisk &&
            this.tableData[i].firstRisk === this.tableData[i - 1].firstRisk
          ) {
            this.twoNameArr[this.twoNamePos] += 1;
            this.twoNameArr.push(0);
          } else {
            this.twoNameArr.push(1);
            this.twoNamePos = i;
          }
          // 第三列
          if (
            this.tableData[i].earlyWarning ===
              this.tableData[i - 1].earlyWarning &&
            this.tableData[i].secRisk === this.tableData[i - 1].secRisk &&
            this.tableData[i].firstRisk === this.tableData[i - 1].firstRisk
          ) {
            this.threeNameArr[this.threeNamePos] += 1;
            this.threeNameArr.push(0);
          } else {
            this.threeNameArr.push(1);
            this.threeNamePos = i;
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0) { // 用于设置要合并的列
      //   if (rowIndex % 2 === 0) { // 用于设置合并开始的行号
      //     return {
      //       rowspan: 2, // 合并的行数
      //       colspan: 1, // 合并的列数, 设置为0则直接不显示
      //     };
      //   }
      //   return {
      //     rowspan: 0,
      //     colspan: 0,
      //   };
      // }
      console.log("dsagvds", row, column, rowIndex, columnIndex);
      if (columnIndex === 0) {
        // 第一列的合并方法
        const row1 = this.oneNameArr[rowIndex];
        const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
        return {
          rowspan: row1,
          colspan: col1,
        };
      } else if (columnIndex === 1) {
        // 第二列的合并方法
        const row2 = this.twoNameArr[rowIndex];
        const col2 = row2 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
        return {
          rowspan: row2,
          colspan: col2,
        };
      } else if (columnIndex === 2) {
        // 第三列的合并方法
        const row3 = this.threeNameArr[rowIndex];
        const col3 = row3 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
        if (row3 == 1) {//证明不用合并列，此时合并行
          return {
            rowspan: 1,
            colspan: 2,
          };
        } else {
          return {
            rowspan: row3,
            colspan: col3,
          };
        }
      }else if (columnIndex === 3) {
        const row3 = this.threeNameArr[rowIndex];
        if (row3 == 1) {//2此时合并行,3-[0,0]
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
      else if (columnIndex === 9) {
        const row2 = this.twoNameArr[rowIndex];
        const col2 = row2 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
        return {
          rowspan: row2,
          colspan: col2,
        };
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.preview  {
     background: #fff;
     margin: 3px;
     padding: 20px;
}
</style>

2.鼠标经过事件

//在el-table上面添加
:cell-class-name="tableRowClassName"
        @cell-mouse-leave="cellMouseLeave"  @cell-mouse-enter="cellMouseEnter"

rowIndex: '-1',
OrderIndexArr: [],
hoverOrderArr: [],

 mounted() {
    this.merage();
    this.getOrderNumber()
  },

getOrderNumber() {
      this.OrderIndexArr=[]
        let OrderObj = {}
        this.tableData.forEach((item, index) => {
            item.rowIndex = index
            if (OrderObj[item.firstRisk]) {
              OrderObj[item.firstRisk].push(index)
            } else {
              OrderObj[item.firstRisk] = []
              OrderObj[item.firstRisk].push(index)
            }
        })
        console.log('this.tableData',this.tableData,OrderObj);
        // 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）/以第一列为准firstRisk
        for (let k in OrderObj) {
          if (OrderObj[k].length > 1) {
            this.OrderIndexArr.push(OrderObj[k])
          }
        }
        console.log('this.OrderIndexArr',this.OrderIndexArr);
      },
   
      tableRowClassName({row,rowIndex}) {
        let arr = this.hoverOrderArr
        for (let i = 0; i < arr.length; i++) {
          if (rowIndex == arr[i]) {
            return 'hovered-row'//成功的样式
          }
        }
      },
      //鼠标经过
      cellMouseEnter(row, column, cell, event) {
        console.log("row.rowIndex",row.rowIndex);
        this.rowIndex = row.rowIndex;
        this.hoverOrderArr = [];
        this.OrderIndexArr.forEach((item,index) => {
            if (item.indexOf(this.rowIndex) >= 0) {
              this.hoverOrderArr = item
            }
        })
      },
       //鼠标离开，初始化
      cellMouseLeave(row, column, cell, event) {
        this.rowIndex = '-1'
        this.hoverOrderArr = [];
      },

<style lang='scss' scoped>
 ::v-deep .el-table .hovered-row {
    background: #f5f7fa;
  }
</style>

3.完整代码，多加-根据状态显示部分颜色框

请添加图片描述


<template>
  <div>
    <div class="preview app-container" ref="preview">
      <el-table :data="tableData" height="500" :header-cell-style="handerMethod" :span-method="objectSpanMethod" border fit :highlight-current-row="false" style="margin-top: 10px;border-collapse:collapse;" :cell-style="cellStyle">
        <el-table-column prop='firstRisk' label='一级' align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop='secRisk' label='二级' align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop='' label='预警' align="center" :show-overflow-tooltip="true" cell-class-name="rowClassNameEarlyWarning">
          <el-table-column label="" prop='earlyWarning' align="center">
          </el-table-column>
          <el-table-column label="" align="center" prop="type"></el-table-column>
        </el-table-column>
        <el-table-column prop='description' label='期末' align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-input v-if="scope.row.state == '1'" v-model="scope.row.description"></el-input>
            <span v-else>{{scope.row.description}}</span>
          </template>
        </el-table-column>
        <el-table-column prop='status' label='季度' align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-input v-if="scope.row.state == '1'" v-model="scope.row.status"></el-input>
            <span v-else>{{scope.row.status}}</span>
          </template>
        </el-table-column>
        <el-table-column prop='status' label='增减率' align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-input v-if="scope.row.state == '1'" v-model="scope.row.status"></el-input>
            <span v-else>{{scope.row.status}}</span>
          </template>
        </el-table-column>
        <el-table-column prop='status' label='备注' align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-input v-if="scope.row.state == '1'" v-model="scope.row.status"></el-input>
            <span v-else>{{scope.row.status}}</span>
          </template>
        </el-table-column>
        <el-table-column prop='status' label='说明' align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-input v-if="scope.row.state == '1'" v-model="scope.row.status"></el-input>
            <span v-else>{{scope.row.status}}</span>
          </template>
        </el-table-column>
        <el-table-column prop='ISstatus' label='是否为风险' align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop='status' label='环比' align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-input v-if="scope.row.state == '1'" v-model="scope.row.status"></el-input>
            <span v-else>{{scope.row.status}}</span>
          </template>
        </el-table-column>
      </el-table>

    </div>
  </div>
</template>

<script>
// import PopupTreeInput from "./PopupTreeInput.vue";
export default {
  name: "preview",
  // import引入的组件需要注入到对象中才能使用PopupTreeInput
  components: {},
  props: [""],
  data() {
    // 这里存放数据
    return {
      titleTable: "2021年度中央企业风险分类监测指标体系",
      ruleForm: {},
      ruleFormRules: {},
      tableData: [
        {
          firstRisk: "战略风险",
          secRisk: "宏观经济风险",
          earlyWarning: "国内外宏观经济",
          type: "国内外宏观经济",
          description: "-",
          ISstatus: "是",
          state: 0,
        },
        {
          firstRisk: "战略风险",
          secRisk: "政策风险",
          earlyWarning: "国家及行业",
          type: "国家及行业",
          description: "-",
          ISstatus: "是",
          state: 0,
        },
        {
          firstRisk: "战略风险",
          secRisk: "国际化经营风险",
          earlyWarning: "受关税政策影响的子企业数量（个）",
          type: "受关税政策影响的子企业数量（个）",
          description: "-",
          ISstatus: "是",
          state: 1,
        },
        {
          firstRisk: "战略风险",
          secRisk: "国际化经营风险",
          earlyWarning: "境外中高风险地区境外资产总额",
          type: "金额（万元）",
          description: "-",
          ISstatus: "是",
          state: 1,
        },
        {
          firstRisk: "战略风险",
          secRisk: "国际化经营风险",
          earlyWarning: "境外中高风险地区境外资产总额",
          type: "占比总额比重",
          description: "-",
          ISstatus: "是",
          state: 0,
        },
        {
          firstRisk: "战略风险",
          secRisk: "国际化经营风险",
          earlyWarning: "项目逾期数量（个）",
          type: "项目逾期数量（个）",
          description: "-",
          ISstatus: "是",
          state: 0,
        },
        {
          firstRisk: "战略风险",
          secRisk: "国际化经营风险",
          earlyWarning: "境外重大法律诉讼案件",
          type: "数量（个）",
          description: "-",
          ISstatus: "是",
          state: 1,
        },
        {
          firstRisk: "战略风险",
          secRisk: "国际化经营风险",
          earlyWarning: "境外重大法律诉讼案件",
          type: "涉案金额（万元）",
          description: "-",
          ISstatus: "是",
          state: 0,
        },

        {
          firstRisk: "战略风险",
          secRisk: "科技创新风险",
          earlyWarning: "科研投入",
          type: "金额（万元）",
          description: "-",
          ISstatus: "是",
          state: 1,
        },
        {
          firstRisk: "战略风险",
          secRisk: "科技创新风险",
          earlyWarning: "科研投入",
          type: "占总收入比重",
          description: "-",
          ISstatus: "是",
          state: 0,
        },
      ],
      oneNameArr: [],
      oneNamePos: 0,
      twoNameArr: [],
      twoNamePos: 0,
      threeNameArr: [],
      threeNamePos: 0,
      OrderIndexArr: [],
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    test: {
      deep: true, // deep: true  // 可以深度检测到 test 对象的属性值的变化
      handler(newV) {
        this.test = newV;
      },
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.merage();
    this.getOrderNumber();
  },
  // 方法集合
  methods: {
    //隐藏表头
    handerMethod({ rowIndex }) {
      // background: 'rgb(242, 242, 242)';
      if (rowIndex === 1) {
        //这里为了是将第二列的表头隐藏，就形成了合并表头的效果
        return { display: "none" };
      } else {
        return { background: "#909399", color: "#fff" };
      }
    },
    merageInit() {
      this.oneNameArr = [];
      this.oneNamePos = 0;
      this.twoNameArr = [];
      this.twoNamePos = 0;
      this.threeNameArr = [];
      this.threeNamePos = 0;
    },
    merage() {
      this.merageInit();
      for (let i = 0; i < this.tableData.length; i += 1) {
        if (i === 0) {
          // 第一行必须存在
          this.oneNameArr.push(1);
          this.oneNamePos = 0;
          this.twoNameArr.push(1);
          this.twoNamePos = 0;
          this.threeNameArr.push(1);
          this.threeNamePos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同,eg：this.oneNamePos 是 this.oneNameArr序号
          // 第一列
          // eslint-disable-next-line no-lonely-if
          if (this.tableData[i].firstRisk === this.tableData[i - 1].firstRisk) {
            this.oneNameArr[this.oneNamePos] += 1;
            this.oneNameArr.push(0);
          } else {
            this.oneNameArr.push(1);
            this.oneNamePos = i;
          }
          console.log("this.oneNameArr", this.oneNameArr);
          // 第二列
          if (
            this.tableData[i].secRisk === this.tableData[i - 1].secRisk &&
            this.tableData[i].firstRisk === this.tableData[i - 1].firstRisk
          ) {
            this.twoNameArr[this.twoNamePos] += 1;
            this.twoNameArr.push(0);
          } else {
            this.twoNameArr.push(1);
            this.twoNamePos = i;
          }
          // 第三列
          if (
            this.tableData[i].earlyWarning ===
              this.tableData[i - 1].earlyWarning &&
            this.tableData[i].secRisk === this.tableData[i - 1].secRisk &&
            this.tableData[i].firstRisk === this.tableData[i - 1].firstRisk
          ) {
            this.threeNameArr[this.threeNamePos] += 1;
            this.threeNameArr.push(0);
          } else {
            this.threeNameArr.push(1);
            this.threeNamePos = i;
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0) { // 用于设置要合并的列
      //   if (rowIndex % 2 === 0) { // 用于设置合并开始的行号
      //     return {
      //       rowspan: 2, // 合并的行数
      //       colspan: 1, // 合并的列数, 设置为0则直接不显示
      //     };
      //   }
      //   return {
      //     rowspan: 0,
      //     colspan: 0,
      //   };
      // }
      // console.log("dsagvds", row, column, rowIndex, columnIndex);
      if (columnIndex === 0) {
        // 第一列的合并方法
        const row1 = this.oneNameArr[rowIndex];
        const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
        return {
          rowspan: row1,
          colspan: col1,
        };
      } else if (columnIndex === 1) {
        // 第二列的合并方法
        const row2 = this.twoNameArr[rowIndex];
        const col2 = row2 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
        return {
          rowspan: row2,
          colspan: col2,
        };
      } else if (columnIndex === 2) {
        // 第三列的合并方法
        const row3 = this.threeNameArr[rowIndex];
        const col3 = row3 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
        if (row3 == 1) {
          //证明不用合并列，此时合并行
          return {
            rowspan: 1,
            colspan: 2,
          };
        } else {
          return {
            rowspan: row3,
            colspan: col3,
          };
        }
      } else if (columnIndex === 3) {
        const row3 = this.threeNameArr[rowIndex];
        if (row3 == 1) {
          //2此时合并行,3-[0,0]
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      } else if (columnIndex === 9) {
        const row2 = this.twoNameArr[rowIndex];
        const col2 = row2 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
        return {
          rowspan: row2,
          colspan: col2,
        };
      }
    },
    getOrderNumber() {
      this.OrderIndexArr = [];
      let OrderObj = {};
      this.tableData.forEach((item, index) => {
        item.rowIndex = index;
        console.log("OrderObj[item.state]", OrderObj[item.state]);
        if (OrderObj[item.state]) {
          OrderObj[item.state].push(index);
        } else {
          OrderObj[item.state] = [];
          OrderObj[item.state].push(index);
        }
      });
      console.log("this.tableData", this.tableData, OrderObj);
      // 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）/state
      for (let k in OrderObj) {
        // console.log("OrderObj[k]",OrderObj[k]);
        if (OrderObj[k].length > 1) {
          this.OrderIndexArr.push(OrderObj[k]);
        }
      }
      console.log("this.OrderIndexArr", this.OrderIndexArr);
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (row.state == 1 && columnIndex != 0 && columnIndex != 1) {
        if (columnIndex != 2 && this.threeNameArr[rowIndex] != 1) {
          if (columnIndex != 9 && columnIndex != 10) {
            if (columnIndex != 3) {
              if (rowIndex == this.tableData.length - 1) {
                return " border:1px solid pink;border-bottom:2px solid pink;border-left:1px solid transparent;padding:0px!important; height:40px!important";
              } else {
                return " border:1px solid pink;border-left:1px solid transparent;padding:0px!important; height:40px!important";
              }
            } else if (rowIndex == this.tableData.length - 1) {
              return "border:1px solid pink; border-bottom: 2px solid pink;border-right: 1px solid pink;  padding:0px!important; height:40px!important";
            } else {
              return " border:1px solid pink;padding:0px!important; height:40px!important";
            }
          } else if (columnIndex == 9) {
            return " border: 1px solid transparent;padding:0px!important; height:40px!important";
          } else if (columnIndex == 10) {
            return "border: 1px solid pink;border-right: 2px solid pink;  padding:0px!important; height:40px!important";
          }
        } else if (this.threeNameArr[rowIndex] == 1) {
          if (columnIndex != 9 && columnIndex != 10) {
            if (columnIndex != 3 && columnIndex != 2) {
              if (rowIndex == this.tableData.length - 1) {
                return " border:1px solid pink;border-bottom:2px solid pink;border-left:1px solid transparent;padding:0px!important; height:40px!important";
              } else {
                return " border:1px solid pink;border-left:1px solid transparent;padding:0px!important; height:40px!important";
              }
            } else if (rowIndex == this.tableData.length - 1) {
              return "border:1px solid pink; border-bottom: 2px solid pink;border-right: 1px solid pink;  padding:0px!important; height:40px!important";
            } else {
              return " border:1px solid pink;padding:0px!important; height:40px!important";
            }
          } else if (columnIndex == 9) {
            return " border: 1px solid transparent;padding:0px!important; height:40px!important";
          } else if (columnIndex == 10) {
            return "border: 1px solid pink;border-right: 2px solid pink; !important; padding:0px!important; height:40px!important";
          }
        }
      }
    },
  },
};
</script>
<style>
.el-form-item__label {
  font-weight: 400 !important;
}
::v-deep .el-table .rowClassNameEarlyWarning {
  border-bottom: 11px solid green !important;
}
</style>
<style lang='scss' scoped>
.preview  {
     background: #fff;
     margin: 3px;
     padding: 20px;
}
::v-deep .el-date-editor .el-input__prefix {
    display: none;
}
 ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: transparent !important;
    // background: pink !important;
  }
  ::v-deep.el-table .el-input__inner {
    border: 0px solid transparent;
    padding: 0;
  }
</style>
加蓓努力我先飞
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element UI table合并行合并列(整理)
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
03-28 7217
element UI table合并行合并列demo效果
el-table合并单元格
weixin_40112036的博客
02-14 9208
el-table合并单元格
vue + elementPlus table合并单元格
最新发布
zjc1952643102的博客
04-29 212
vue + element-plus 合并单元格
使用小技巧实现el-table组件的合并行功能，ElementUI和ElementPlus都适用
都随它大小便吧
05-10 1万+
有时遇到一些需求，需要实现ElementUI或ElementPlus中，el-tabled组件合并单元格的功能，稍微了解一下它的数据格式，不难可以写出比合并方法。但是在鼠标经过单元行时，会出现高亮的行与鼠标经过的行不一致的BUG。因此还需要实现@cell-mouse-enter和@cell-mouse-leave这两个方法，才可解决此问题。
elementUI Table的行合并通用方法
weixin_42342065的博客
10-19 3849
前言： 有些业务需求是需要table进行行合并的，下面根据其他博客的方法整理了下通用方法，如下： 通用方法： /**在工具类util.js中定义通用方法 * table合并行通用 */ // eslint-disable-next-line space-before-function-paren export default mergeTableRow(config) { let data = config.data const { mergeColNames, // 需要合并的列
el-table动态合并单元格
weixin_37252943的博客
11-10 1816
el-table动态合并单元格
Element ui el-table 合并单元格
m0_56540662的博客
06-16 1551
mergeRecording: [], // 合并记录 存放需要合并列的每行对应的合并数 [[当前行对应的合并数, 当前行对应的合并数, ...], ...]this.mergeRecording[i].push(count) // 本单元格的合并的开头索引值。this.mergeObj[key][count] += 1 // 上一行的合并数+1。this.mergeRecording[i] = [] // 记录本列合并的开头索引值。this.mergeObj[key] = [] // 记录合并数组。
element-ui表格el-table动态合并单元格（合并行和列）以及给表头添加斜线
01-11
实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列
vue 中 elment-ui table合并上下两行相同数据单元格
10-15
主要介绍了vue 中 elment-ui table合并上下两行相同数据单元格，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
element-ui中Table表格省市区合并单元格的方法实现
10-16
主要介绍了element-ui中Table表格省市区合并单元格的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element-ui 表格实现单元格可编辑的示例
12-29
<el data=tableData cell-mouse-enter=handleMouseEnter cell-mouse-leave=handleMouseOut xss=removed> 日期 width=180> <span v-if=!scope.row.editFlag>{{ scope.row.name }} <span v-if
论element-ui表格的合并行和列（巨细节）
小邹的博客
03-15 1万+
​ 作为一个后端来写前端属实是痛苦、讲真的、刚开始我是真不想用饿了么的这个合并行和列、因为太语焉不详了、看着头疼、后来发现好像我没得选、只好硬着头皮上了。
elementUI中table单元格的合并，通用版
weixin_46103180的博客
09-21 5636
elementUI中table单元格的合并，通用版
element表格 合并行两种方法
Yangpengxunb的博客
05-19 2351
【代码】element表格 合并行或列。
el-table表格合并单元格实现步骤
qq_46103732的博客
02-08 537
在需要合并单元格的el-table表格上绑定 :span-method="arraySpanMethod"在method中添加方法arraySpanMethod。el-table表格合并单元格
【element-ui】 el-table 表格动态合并相同数据单元格最全教程，可指定列+自定义合并条件，附完整代码
热门推荐
coderYYY的博客
02-19 2万+
【element-ui】 el-table 表格动态合并相同数据单元格最全教程，可指定列+自定义合并条件，附完整代码
element-ui表格的合并单元格（合并行合并列
JandyPam的博客
05-18 402
解决element ui表格组件合并单元格的问题
Element UI 的 table 单元格合并
beijixing333y的博客
06-21 1万+
Element UI 的 table 单元格合并
element 表格(table)合并行
Zt0118的博客
06-30 452
element 表格(table)合并行
vue+element-ui table 单元格动态合并
04-24
好的，关于vue element-ui table单元格动态合并，我可以给你一些思路和建议。你可以使用element-ui table的slot-scope特性，对单元格进行自定义渲染，通过计算相邻单元格内容是否相等，来实现单元格的动态合并。具体...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值