精华内容
下载资源
问答
  • el-table的高度自适应问题 el-table__body-wrapper的高度大于el-table__body的高度,导致表格最后一行后有留白,大致如下: 通过设置了表格外层的高度为当前的90%可以解决数据固定的表格问题 .el-table__body-...

    el-table的高度自适应问题

    el-table__body-wrapper的高度大于el-table__body的高度,导致表格最后一行后有留白,大致如下:
    在这里插入图片描述
    通过设置了表格外层的高度为当前的90%可以解决数据固定的表格问题

    .el-table__body-wrapper {
        height: 90%!important;   //具体百分比可以根据自身情况调整
      }
    

    但此法缺乏灵活性

    当前表格有一个固定高度的显示区域,超出高度自动滚动,滚动时无此样式Bug所以无需处理,只需要对于表格行数不足以沾满固定高度时动态设置高度

    通过调整样式发现,固定高度最多放下7行内容,大于等于7行数据时表格滚动,样式正常,数据小于7行时,改变表格高度为 tableHeifght=tableData.length*每行高度; 将tableHeigh设置在table标签上

    <el-table :data="tableData"  :height="tableHeight" border >
    ...
    </el-table>
    

    tablleHeight初始化为最大高度

    检测数据项数,调整表格高度

    if(this.tableData.length<7){
      this.tableHeight = this.tableData.length*42+39; //每行表格高度*项数+表头高度
    }
    

    这里是一种比较方便的思路

    展开全文
  • 今天在研究keep-alive页面缓存的时候发现,切换到其他页面再切换回已打开的页面时,el-table表格出现底部还有空白,但是出现了滚动条的问题。查看控制台发现el-table__body-wrapper高度小于el-table的高度。如图: ...

    今天在研究keep-alive页面缓存的时候发现,切换到其他页面再切换回已打开的页面时,el-table表格出现底部还有空白,但是出现了滚动条的问题。查看控制台发现el-table__body-wrapper高度小于el-table的高度。如图:

    解决:

    在网上找了一些方法,发现doLayout()方法可以完美解决!

    element2.0.5发布的该方法,可以用于重新计算表格布局

    使用方法:

    如果不是缓存页面,在mounted调用,如果是缓存页面,则在activated调用。在我的项目中是只有在缓存的页面才有这个问题,所以就只需要加activated的就行了哦

    mounted() {
        this.$nextTick(() => {
            this.$refs.simpleTable.doLayout()
        })
    },
    activated() {
        this.$refs.simpleTable.doLayout()
    }

     

    展开全文
  • el-table-column>用法区别! 初学者可能很容易混淆它们的用法,其实是没有认真看官方文档,下面总结一下: <el-row> <el-col>标签是属于element的Layout布局控件: 如下图,参考element官网的说明...

    elementUI框架的<el-row> <el-col> 与<el-table-column>用法区别!

    初学者可能很容易混淆它们的用法,其实是没有认真看官方文档,下面总结一下 :

    <el-row> <el-col>标签是属于element的Layout布局控件:

    如下图,参考element官网的说明:

    <el-row> <el-col>是Layout布局控件中的组件:

    通过官方文档的说明,即布局的一行(el-row)的宽度分为24等份,通过span属性来确定每一个列(el-col)的宽度,占了24份中的几份。无论一个el-row中有几个el-col,其span的总值必须等于24.

    上图的不同颜色的布局代码如下:

    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>
    <el-row>
      <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>

    el-table-column 标签是属于element的table控件:

    总结:

    在element中,el-row  el-col 是布局控件,table才是真正的表格控件!

    微信搜索:acoolgiser,一起学习成长,交个朋友!^_^

    或者直接扫描

     

     

    展开全文
  • element el-table --vue-- 纯data数据 el-table+样式+合并 效果: // 项目成果管理(右侧表格) 2020.9.14 李瑶 <template> <div class="project-table"> <!-- 进度表 --> <div class="w100 ...

    element el-table --vue-- 纯data数据 el-table+样式+合并 代码

    效果:

    在这里插入图片描述

    // 项目成果管理(右侧表格) 2020.9.14 李瑶
    <template>
      <div class="project-table">
        <!-- 进度表 -->
        <div class="w100 f-w600 f16 no-w p-10">项目季报和年报成果</div>
        <el-table :data="tableData" border style="width: 100%" :span-method="arraySpanMethod">
          <el-table-column prop="yearDate" label="年份" align="center">
          </el-table-column>
          <el-table-column prop="start" label="项目启动" align="center">
            <template slot-scope="scope">
              <div class="flex-left">{{scope.row.start}}:</div>
              <div class="fileOne flex-left" v-for="(value,key,index) in scope.row.startFiles" :index="index"><a :href="value" target="_blank" :title="key">{{key}}</a></div>
              <div class="noInfo flex1-c" v-if="JSON.stringify(scope.row.startFiles) =='{}'">暂无数据</div>
            </template>
          </el-table-column>
          <el-table-column prop="firstQuarter" label="第一季度" align="center">
            <template slot-scope="scope">
              <div class="flex-left">{{scope.row.firstQuarter}}:</div>
              <div class="fileOne flex-left" v-for="(value,key,index) in scope.row.firstFiles" :index="index"><a :href="value" target="_blank" :title="key">{{key}}</a></div>
              <div class="noSubmit flex1-c" v-if="JSON.stringify(scope.row.firstFiles) =='{}'">未提交</div>
            </template>
          </el-table-column>
          <el-table-column prop="secondQuarter" label="第二季度" align="center">
            <template slot-scope="scope">
              <div class="flex-left">{{scope.row.secondQuarter}}:</div>
              <div class="fileOne flex-left" v-for="(value,key,index) in scope.row.secondFiles" :index="index"><a :href="value" target="_blank" :title="key">{{key}}</a></div>
              <div class="noSubmit flex1-c" v-if="JSON.stringify(scope.row.secondFiles) =='{}'">未提交</div>
            </template>
          </el-table-column>
          <el-table-column prop="thirdQuarter" label="第三季度" align="center">
            <template slot-scope="scope">
              <div class="flex-left">{{scope.row.thirdQuarter}}:</div>
              <div class="fileOne flex-left" v-for="(value,key,index) in scope.row.thirdFiles" :index="index"><a :href="value" target="_blank" :title="key">{{key}}</a></div>
              <div class="noSubmit flex1-c" v-if="JSON.stringify(scope.row.thirdFiles) =='{}'">未提交</div>
            </template>
          </el-table-column>
          <el-table-column prop="fourthQuarter" label="第四季度" align="center">
            <template slot-scope="scope">
              <div class="flex-left">{{scope.row.fourthQuarter}}:</div>
              <div class="fileOne flex-left" v-for="(value,key,index) in scope.row.fourthFiles" :index="index"><a :href="value" target="_blank" :title="key">{{key}}</a></div>
              <div class="noSubmit flex1-c" v-if="JSON.stringify(scope.row.fourthFiles) =='{}'">未提交</div>
            </template>
          </el-table-column>
          <el-table-column prop="yearQuarter" label="年度" align="center">
            <template slot-scope="scope">
              <div class="flex-left">{{scope.row.yearQuarter}}:</div>
              <div class="fileOne flex-left" v-for="(value,key,index) in scope.row.yearFiles" :index="index"><a :href="value" target="_blank" :title="key">{{key}}</a></div>
              <div class="noSubmit flex1-c" v-if="JSON.stringify(scope.row.yearFiles) =='{}'">未提交</div>
            </template>
          </el-table-column>
          <el-table-column prop="year" label="年报" align="center">
            <template slot-scope="scope">
              <div class="flex-left">{{scope.row.year}}:</div>
              <div class="fileOne flex-left" v-for="(value,key,index) in scope.row.files" :index="index"><a :href="value" target="_blank" :title="key">{{key}}</a></div>
              <div class="noSubmit flex1-c" v-if="JSON.stringify(scope.row.files) =='{}'">未提交</div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 自定义节点成果 -->
        <div class="w100 f-w600 f16 no-w p-10">自定义节点成果</div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址">
          </el-table-column>
        </el-table>
        <!-- 总结成果 -->
        <div class="w100 f-w600 f16 no-w p-10">总结成果</div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址">
          </el-table-column>
        </el-table>
      </div>
    </template>
    
    <script>
    export default {
      components: {},
      name: "",
      data() {
        return {
          tableData: [
            {
              yearDate: "2016",
              start: "实施方案",
              startFiles: { 文件一: "http://www.w3school.com.cn" },
              firstQuarter: "季报",
              firstFiles: {
                文件一: "http://www.w3school.com.cn",
                文件二: "http://www.w3school.com.cn",
                文件三: "http://www.w3school.com.cn",
              },
              secondQuarter: "季报",
              secondFiles: {
                文件二: "http://www.w3school.com.cn",
                文件三: "http://www.w3school.com.cn",
              },
              thirdQuarter: "季报",
              thirdFiles: {
                文件一: "http://www.w3school.com.cn",
                文件三: "http://www.w3school.com.cn",
              },
              fourthQuarter: "季报",
              fourthFiles: {
                文件一: "http://www.w3school.com.cn",
                文件二: "http://www.w3school.com.cn",
                文件三: "http://www.w3school.com.cn",
              },
              yearQuarter: "年报",
              yearFiles: {
                文件一: "http://www.w3school.com.cn",
                文件二: "http://www.w3school.com.cn",
              },
              year: "年报",
              files: {},
            },
            {
              yearDate: "2016",
              start: "三色评价",
              startFiles: { 文件一: "http://www.w3school.com.cn" },
              firstQuarter: "三色评价",
              firstFiles: {
                文件一: "http://www.w3school.com.cn",
                文件二: "http://www.w3school.com.cn",
                文件三: "http://www.w3school.com.cn",
              },
              secondQuarter: "三色评价",
              secondFiles: {
                文件二: "http://www.w3school.com.cn",
                文件三: "http://www.w3school.com.cn",
              },
              thirdQuarter: "三色评价",
              thirdFiles: {
                文件一: "http://www.w3school.com.cn",
                文件三: "http://www.w3school.com.cn",
              },
              fourthQuarter: "三色评价",
              fourthFiles: {
                文件一: "http://www.w3school.com.cn",
                文件二: "http://www.w3school.com.cn",
                文件三: "http://www.w3school.com.cn",
              },
              yearQuarter: "三色评价",
              yearFiles: {
                文件一: "http://www.w3school.com.cn",
                文件二: "http://www.w3school.com.cn",
              },
              year: "三色评价",
              files: {},
            },
            {
              yearDate: "2016",
              start: "监测意见",
              startFiles: { 文件一: "http://www.w3school.com.cn" },
              firstQuarter: "监测意见",
              firstFiles: {
                文件一: "http://www.w3school.com.cn",
                文件二: "http://www.w3school.com.cn",
                文件三: "http://www.w3school.com.cn",
              },
              secondQuarter: "监测意见",
              secondFiles: {
                文件二: "http://www.w3school.com.cn",
                文件三: "http://www.w3school.com.cn",
              },
              thirdQuarter: "监测意见",
              thirdFiles: {
                文件一: "http://www.w3school.com.cn",
                文件三: "http://www.w3school.com.cn",
              },
              fourthQuarter: "监测意见",
              fourthFiles: {
                文件一: "http://www.w3school.com.cn",
                文件二: "http://www.w3school.com.cn",
                文件三: "http://www.w3school.com.cn",
              },
              yearQuarter: "监测意见",
              yearFiles: {
                文件一: "http://www.w3school.com.cn",
                文件二: "http://www.w3school.com.cn",
              },
              year: "监测意见",
              files: {},
            },
            {
              yearDate: "2017",
              start: "实施方案",
              startFiles: { 项目启动方案: "http://www.w3school.com.cn" },
              firstQuarter: "季报",
              firstFiles: {
                我觉得文件名长点也无所谓吧就这样吧: "http://www.w3school.com.cn",
                文件二: "http://www.w3school.com.cn",
                文件三: "http://www.w3school.com.cn",
              },
              secondQuarter: "季报",
              secondFiles: {
              },
              thirdQuarter: "季报",
              thirdFiles: {
                文件一: "http://www.w3school.com.cn",
                文件三: "http://www.w3school.com.cn",
              },
              fourthQuarter: "季报",
              fourthFiles: {
                文件一: "http://www.w3school.com.cn",
                文件二: "http://www.w3school.com.cn",
                文件三: "http://www.w3school.com.cn",
              },
              yearQuarter: "年报",
              yearFiles: {
                文件一: "http://www.w3school.com.cn",
                文件二: "http://www.w3school.com.cn",
              },
              year: "年报",
              files: {},
            },
            {
              yearDate: "2017",
              start: "三色评价",
              startFiles: { 文件一: "http://www.w3school.com.cn" },
              firstQuarter: "三色评价",
              firstFiles: {
                文件一: "http://www.w3school.com.cn",
                文件三: "http://www.w3school.com.cn",
              },
              secondQuarter: "三色评价",
              secondFiles: {
                文件二: "http://www.w3school.com.cn",
              },
              thirdQuarter: "三色评价",
              thirdFiles: {
                文件一: "http://www.w3school.com.cn",
                文件三: "http://www.w3school.com.cn",
              },
              fourthQuarter: "三色评价",
              fourthFiles: {
                文件一: "http://www.w3school.com.cn",
                文件二: "http://www.w3school.com.cn",
                文件三: "http://www.w3school.com.cn",
              },
              yearQuarter: "三色评价",
              yearFiles: {
              },
              year: "三色评价",
              files: {},
            },
            {
              yearDate: "2017",
              start: "监测意见",
              startFiles: { 文件一: "http://www.w3school.com.cn" },
              firstQuarter: "监测意见",
              firstFiles: {
                文件一: "http://www.w3school.com.cn",
                文件二: "http://www.w3school.com.cn",
                文件三: "http://www.w3school.com.cn",
              },
              secondQuarter: "监测意见",
              secondFiles: {
                文件二: "http://www.w3school.com.cn",
              },
              thirdQuarter: "监测意见",
              thirdFiles: {
                文件一: "http://www.w3school.com.cn",
                文件三: "http://www.w3school.com.cn",
              },
              fourthQuarter: "监测意见",
              fourthFiles: {
              },
              yearQuarter: "监测意见",
              yearFiles: {
                文件一: "http://www.w3school.com.cn",
                文件二: "http://www.w3school.com.cn",
              },
              year: "监测意见",
              files: {},
            },
          ],
          // 合并的数组
          spanArr: [],
          pos: 0,
        };
      },
      computed: {},
      watch: {},
      methods: {
        // 获取合并的数组
        getSpanArr(tableData) {
          for (var i = 0; i < tableData.length; i++) {
            if (i === 0) {
              // 第一行的不动
              this.spanArr.push(1);
              this.pos = 0;
            } else {
              // 判断当前元素与上一个元素是否相同
              if (tableData[i].yearDate === tableData[i - 1].yearDate) {
                // console.log(this.pos,"this.pos")
                this.spanArr[this.pos] += 1;
                this.spanArr.push(0);
              } else {
                this.spanArr.push(1);
                this.pos = i;
              }
            }
          }
          //   console.log("这是this.spanArr", this.spanArr);
          //   console.log("这是pos", this.pos);
        },
        // 年份合并
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
          // 合并第一列的
          if (columnIndex === 0) {
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
              rowspan: _row,
              colspan: _col,
            };
          }
        },
      },
      beforeCreate() {},
      created() {},
      beforeMount() {},
      mounted() {
        this.getSpanArr(this.tableData);
      },
      beforeUpdate() {},
      updated() {},
      beforeDestroy() {},
      distroyed() {},
    };
    </script>
    
    <style lang='scss' scoped>
    // 公共部分
    // 文件样式
    .fileOne {
      display: block;
      width: 100%;
      a {
        display: inline-block;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    // 暂无数据样式
    .noInfo {
      width: 100%;
      font-size: 14px;
      color: #ccc;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    // 未提交样式
    .noSubmit {
      width: 100%;
      font-size: 14px;
      color: red;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .flex-left{
        width:100%;
        display: flex;
        justify-content: flex-start;
    }
    .flex1 {
      display: flex;
      flex-direction: row;
    }
    .flex1-c {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    .f-w600 {
      font-weight: 600;
    }
    .f16 {
      font-size: 16px;
    }
    .w100 {
      width: 100%;
    }
    .p-10 {
      padding: 10px;
    }
    .no-w {
      white-space: nowrap;
    }
    .project-table {
      width: 100%;
      height: 100%;
      overflow: auto;
    }
    </style>
    <style>
    /* 右侧表格多余的部分滚动 */
    .el-tabs__content {
      height: 90%;
      overflow: auto;
    }
    </style>
    
    展开全文
  • @给el-table表头增加控件,图标 前言 element-UI中给el-table表头增加控件,图标, 以及在增加中有增加样式盒子写不上去原因 二、使用步骤 1.组件代码 代码如下(示例): <el-table-column label="好棒" width=...
  • el-table-column width="180"> <template slot="header" slot-scope="scope"> 销售提成 <el-tooltip effect="dark" content="若销售提成按“百分比”,则根据“活动价”来计算" placement="top"&...
  • Vue.js进阶文章列表 上代码 <template>...el-table-column v-for="(item,index) in columnList" :key="index" :prop="item.prop" :label="item.prop"></el-table-column> </el-t
  • .el-table, .el-table__expanded-cell{ background-color: transparent; } /* 表格内背景颜色 */ .el-table th, .el-table tr, .el-table td { background-color: transparent; } 组件化开发 less则需要加上/deep...
  • el-table

    千次阅读 2019-04-03 15:56:02
    <el-table :data="tableData" //对象数组 border //设置边框 style="width: 20%"> <el-table-column prop="date" label="日期" width="100"> </el-table-column> ...
  • el-table格式化el-table-column内容

    万次阅读 2018-07-05 23:38:25
    el-table-column prop="os" label="平台" :formatter="formatterBannerOs" align="center"&gt; &lt;/el-table-column&gt;// 格式化表格方法 ...
  • el-table格式化el-table-column内容 遇到一个需求,一个循环展示的table中的某项,或者某几项需要格式化。对于格式化的方法,主要有template scope、formatter; 一、template scope 、v-if判断 <el-table-column...
  • el-table-column 使用 v-for 中el-table遍历数某个字段,多层嵌套时处理数组 数据
  • VUE 解决el-table表格在有v-if时出现的列抖动现象 在日常编码过程中,我们经常使用el-table+el-tabs组件一起渲染列表数据 但是他们两个一起使用时只要一改变数据就会引起table列的抖动 可以使用以下方式解决 before...
  • 问题描述:el-table 每一行有个按钮,点击弹出编辑对话框,还有一个按钮点击查看详情,这个按钮绑定了,el-popover。 el-popover中是一个v-for 生成的 列表。...怀疑 每次都刷新了 el-table,多次调...
  • 前端vue开发后台项目经常会使用element-ui组件,估计el-table组件算是其中使用率相当高的了,在这其中有时候就会出现表格列偏移的问题,尤其是列较长表格设置表头或者表尾列固定时 经过测试,发现设置使用 :min-...
  • el-table格式化el-table-column内容

    千次阅读 2018-11-21 14:47:05
    el-table-column  prop="os"  label="平台"  :formatter="formatterBannerOs"  align="center"&gt; &lt;/el-table-column&gt; // 格式化表格方法  ...
  • 1.el-table 做几个日志列表(只有些许列不一致的场景): 不能用组件方式插入el-table-column,会使列乱序(查资料解释说组件引入会多加一层容器,导致elementUI不能正确排序)。只能换位用slot插入动态的column,...
  • body .el-table th.gutter { display: table-cell !important; }
  • element-ui el-table组件的 el-table-column 加了fixed属性列固定后样式高度错乱问题操作列设置了属性:固定fixed后发现每页最后一个button显示不全,查看源码后发现最后一列是class=“el-table__fixed-right”,...
  • 使用formatter来实现 ...el-table-column label="状态" :formatter="statusFormat"> </el-table-column> methods: { statusFormat: function(row, column) { let status = row.statu...
  • el-table :data="currentData" style="width: 80%;height:50%;" height="500px" v-if="chamberVisuble"> <el-table-column align="center" label="Start Time" width="120" prop="START_TI...
  • 在一些项目中,可能会要求表格的标题要求可以点击,切换表格的内容,这时可以用el-table的render-header属性来实现,如图: 上代码: <template> <div id="renderHeader"> <el-table :data=...
  • 于是就想到了在隐藏列显示后触发一下el-table的resize之类的方法应该就可以了。 在隐藏列显示之后,执行: this.$nextTick(() => { this.$refs.table.doLayout(); }); 万事大吉,搞定!记录一下,免得自己...
  • header-cell-style设置头部居中;cell-style设置单元格内容居中 ...el-table ref="table1" :data="tableData1" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" style="w...
  • 在需要使用v-if渲染的el-table-column元素上加上一个不重复的key值即可解决问题 <el-table-column v-if="status ===3" :key="Math.random()">是否在线</el-table-column> <el-table-column v-if=...
  • el-table树型数据合计行 1.el-table部分的代码 <el-table :data="data" border row-key="rowKey" :summary-method="getSummaries" show-summary> 2.methods里边的代码 getSum (tree, idx, sums, index) { ...
  • /deep/.el-table tbody tr:hover>td { background-color: #242133 !important; position: relative; } /deep/.el-table__body-wrapper { overflow: visible !important; } /deep/.el-table

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,987
精华内容 3,994
关键字:

el-table