有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

table合并(el-table 行列合并)实现方式

vue 炮渣日记 4周前 (11-11) 20次浏览 已收录 0个评论 扫描二维码

#elementui#

table合并(el-table 行列合并)实现方式

element-ui

Element-UI ( https://element.eleme.cn/#/zh-CN/component/table ) 是个很流行的 VUE 组件库,包含很多优秀的组件。今天说一下 table的行列合并

官方例子

table合并(el-table 行列合并)实现方式

官方例子

通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

<template>
  <div>
    <el-table
         :data="tableData"
         :span-method="arraySpanMethod"
         border
        style="width: 100%">
      <el-table-column prop="id"  label="ID" width="180">  </el-table-column>
      <el-table-column  prop="name"   label="姓名">  </el-table-column>
      <el-table-column  prop="amount1"  sortable  label="数值 1"> </el-table-column>
      <el-table-column prop="amount2" sortable label="数值 2"> </el-table-column>
      <el-table-column prop="amount3" sortable label="数值 3"> </el-table-column>
    </el-table>

    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px">
      <el-table-column  prop="id"  label="ID" width="180"> </el-table-column>
      <el-table-column   prop="name" abel="姓名"> </el-table-column>
      <el-table-column  prop="amount1"  label="数值 1(元)"> </el-table-column>
      <el-table-column  prop="amount2" label="数值 2(元)"> </el-table-column>
      <el-table-column  prop="amount3" label="数值 3(元)">  </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {  id: '12987122', name: '王小虎', amount1: '234',  amount2: '3.2', amount3: 10 }, 
          {  id: '12987123', name: '王小虎', amount1: '165',  amount2: '4.43', amount3: 12 },
          { id: '12987124', name: '王小虎', amount1: '324',   amount2: '1.9', amount3: 9 },
          { id: '12987125', name: '王小虎', amount1: '621',  amount2: '2.2',  amount3: 17},
          { id: '12987126',  name: '王小虎', amount1: '539', amount2: '4.1', amount3: 15 }
        ]
      };
    },
    methods: {
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 2 === 0) {
          if (columnIndex === 0) {
            	return [1, 2]; 
          } else if (columnIndex === 1) {
            	return [0, 0];
          }
        }
      },

      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
    }
  };
</script>

理解 arraySpanMethod 方法

      // 数组方式合并列,将行索引与2取余为0的行中的第1、 2列合并
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        // 如果 行索引与2取余为零,
        if (rowIndex % 2 === 0) {
          // 如果 列索引是0(第一列),则设置合并
          if (columnIndex === 0) {
            	return [1, 2]; // 合并一行中的两列,从当前列开始。即合并1行,且从第一列开始合并2列
          } else if (columnIndex === 1) {
             // 删除多余的列(原来的第2列)
            // 因为 第一列合并为两列了,占用了两列的空间,原来的第2列会占用原来的第三列,依次类推
            ,这一行就会多出一列,并且导致数据错行,显示结果不正确
            	return [0, 0];
          }
        }
      },

注意: 行列合并后,记得使用[0,0] 删除多余列 ,使用对象方式合并时一样,{ rowspan: 0, colspan: 0}也是为了删除多余列。

拓展

需求:如下图画出表格

table合并(el-table 行列合并)实现方式

行列合并拓展

分析: 上图中是合并第3列,合并后第3列将占据原来的第4、5列。所以要将第4、5列删掉

代码:

<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      style="width: 800px">
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column label="数值" align="center" >
            <el-table-column  prop="amount1" label="数值 1"> </el-table-column>
            <el-table-column prop="amount2"  label="数值 2"> </el-table-column> 
            <el-table-column  prop="amount3" label="数值 3"> /el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
    data(){
        return{
        tableData: [
            {  id: '12987122', name: '王小虎', amount1: '234',  amount2: '3.2', amount3: 10 }, 
            {  id: '12987123', name: '王小虎', amount1: '165',  amount2: '4.43', amount3: 12 },
            { id: '12987124', name: '王小虎', amount1: '324',   amount2: '1.9', amount3: 9 },
            { id: '12987125', name: '王小虎', amount1: '621',  amount2: '2.2',  amount3: 17},
            { id: '12987126',  name: '王小虎', amount1: '539', amount2: '4.1', amount3: 15 }
        ]
        };
    },
    methods:{
      arraySpanMethod({ row, columnIndex }) {
        let val1 = row.amount1;
        if(val1 % 2 === 0 ){
          // 如果是第2列
            if(columnIndex ===2){
                return [1,3] ; // 从第2列开始,合并一行中的三列,及合并3、4、5 列
            }else if( columnIndex === 4 || columnIndex === 5){  // 删除 4、5列
                return [0 , 0] 
            }
        }
      }
    }
}
</script>

<style>
</style>

行合并的和列子类似。

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址