Vue el-table 默认展开某一行的实例

目录
  • Vue el-table 默认展开某一行
  • el-table 高亮某一行
    • 使用 highlight-current-row 属性
    • 使用 row-class-name

Vue el-table 默认展开某一行

需求是在另外一个页面选择IP地址直接到这个页面,并需要默认展开选择的那一行

代码如下:

<el-table
  border
  ref="expandTable"
  :data="nodeList">
  <el-table-column type="expand">
    <template slot-scope="props">
      <el-form label-position="left" inline class="demo-table-expand">
        <el-form-item label="节点IP:">
          <span>{{ props.row.ip }}</span>
        </el-form-item>
        <el-form-item label="国家/城市:">
          <span>{{ props.row.country }}</span>
        </el-form-item>
        <el-form-item label="购买日期:">
          <span>{{ props.row.purchaseDate }}</span>
        </el-form-item>
        <el-form-item label="到期日期:">
          <span>{{ props.row.expiryDate }}</span>
        </el-form-item>
      </el-form>
    </template>
  </el-table-column>
  <el-table-column type="selection" width="55" align="center"/>
  <el-table-column label="序号" type="index" width="55" align="center"/>
  <el-table-column label="IP地址" align="center" prop="ip" width="150"/>
  <el-table-column label="国家/城市" align="center" prop="country" width="200"/>
  <el-table-column label="购买日期" align="center" prop="purchaseDate" sortable width="160"/>
  <el-table-column label="到期日期" align="center" prop="expiryDate" sortable width="160"/>
</el-table>

在获取列表时,调用展开详情,这只适用于一个表格

/** 查询列表 */
getList() {
  this.nodeList = [];
  // 从URL中获取的对应的主键ID
  const rowId = this.$route.query && this.$route.query.rowId;
  listNode(this.queryParams).then(response => {
    this.nodeList = response.rows;
    this.total = response.total;
    // 查找rowId对应的列表的下标值
    let index = this.nodeList.findIndex(item => item.id === this.rowId);
    if (index >= 0) {
      this.openDetail(this.nodeList[index]);
    }
  });
},
/** 展开详情 */
openDetail(row) {
  this.$nextTick(() => {
    this.$refs.expandTable.toggleRowExpansion(row, true);
  });
},

但是如果表格在for循环下,或者在多个tab下的话,那么this.$refs.expandTable就是一个数组,就需要使用下列方式:

openDetail(row) {
  this.$nextTick(() => {
    for (let i = 0; i < this.$refs.expandTable.length; i++) {
      this.$refs.expandTable[i].toggleRowExpansion(row, true);
    }
  });
},

el-table 高亮某一行

使用 highlight-current-row 属性

el-table 加上 highlight-current-row 属性。

<el-table ref='tTable' :data="dataList" highlight-current-row></el-table>

调用 setCurrentRow(row, true) 设置当前行高亮,row为dataList里面的数据。

selectRow(row) {
     if (row) {
       this.$refs.tTable.setCurrentRow(row, true);
     } else {
       this.$refs.tTable.setCurrentRow();  // 取消高亮
     }
}

如果要改变默认的高亮的颜色。这样就把项目中所有el-table的高亮颜色都改了。

<style lang="scss">
    .el-table__body tr.current-row>td {
        background: #453878 !important;
    }
</style>

使用 row-class-name

<el-table ref='transcriptTable' :data="sentenceList" height="400" :row-class-name="transcriptTableRowClassName"></table>
    transcriptTableRowClassName({row, rowIndex}) {
        if (rowIndex === this.curSentenceRowIndex) {
            return 'speak-row';
        }
        return '';
    },

如果是当前行时,返回不同的样式。

<style lang="scss">
    .el-table .speak-row {
        color: darkorange;
        font-size: 15px;
        font-weight: 500;
        background: #f0f9eb;
    }
</style>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue el-tree 默认展开第一个节点的实现代码

    vue 的树形控件 el-tree 可以用来方便地实现树形控件,但是官方文档中,关于控件的默认展开只有默认展开全部或者默认全部关闭,如下所示: 对于指定节点的展开,需要指定其id,从而通过 default-expanded-keys 设置默认展开的节点. 对于后台返回的数据,默认展开其第一层的第一个,其实很简单:对于获取到的后台数据,将其第一层节点添加到数组中,将 default-expanded-keys 绑定数组,从而设置默认展开的节点. 实际应用:默认展开第一层节点中的第一个节点: <te

  • Vue如何动态修改el-table的某列数据

    目录 动态修改el-table的某列数据 设置el-table某一列点击出现输入框可以编辑 动态修改el-table的某列数据 1.对话框打开时调用函数open@opened="checked" 2.可编辑 <el-table-column     -------- visEdit="true"       > 3.同步选中的数据List:multipleSelection ,函数  checked: function () 设置el-table某一列点

  • vue实现动态控制el-table表格列的展示与隐藏

    本文实例为大家分享了vue动态控制el-table表格列的展示与隐藏的具体代码,供大家参考,具体内容如下 1.引入el-table组件,这里我直接用官网的示例代码 <template>     <div class="page">         <el-popover width="60" trigger="click">             <el-checkbox-group v-model=&

  • element ui table(表格)实现点击一行展开功能

    前言 element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击右箭头可以展开,我们的很多需求是点击某一行展开 那是不是无法实现呢?其实,借助element ui的一些属性,轻松实现点击某行展开,我们还是用2.0.9版本官网的例子, 对齐改造,使之可以做到这点 <template> <el-table :data="tableData5&

  • Vue el-table 默认展开某一行的实例

    目录 Vue el-table 默认展开某一行 el-table 高亮某一行 使用 highlight-current-row 属性 使用 row-class-name Vue el-table 默认展开某一行 需求是在另外一个页面选择IP地址直接到这个页面,并需要默认展开选择的那一行 代码如下: <el-table   border   ref="expandTable"   :data="nodeList">   <el-table-colum

  • ant design vue 表格table 默认勾选几项的操作

    为什么我同样的功能要用react .vue 都写一遍 ? 啊我真是不是闲的蛋疼啊(- o -)~zZ 在 ant design vue 中,表格的第一列是联动的选择框 截一张官方文档图,图示最后一排就是禁用状态 点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组. onChange: (selectedRowKeys, selectedRows) => { console.log(`selectedR

  • vue使用ElementUI时导航栏默认展开功能的实现

    本文主要参考: http://element.eleme.io/#/zh-CN/component/menu 在使用elementUI的时候发现,能够展开的导航栏是不能展开的,效果这里先不演示了.可以在上边的网站上看到. 现在有这样的需求,就是说,默认的时候需要展开这些导航,就是一打开界面的时候就能够显示导航里面的菜单内容. 具体操作是这样的: <script src="//unpkg.com/vue/dist/vue.js"></script> <scr

  • 解决ant-design-vue中menu菜单无法默认展开的问题

    在ant-design-vue的文档中, menu有两个可以传的参数,分别为defaultOpenKeys和openKeys,但在接手做一个项目时,openKeys这个参数前人已经写了,可能是从文档中直接复制demo没有删除掉,我也没去管. 等到需要用到这个defaultOpenKeys的时候,想做每次刷新还会再次打开上次打开的菜单的效果,但一直无效,网上也没有查到有类似的情况,后面只能自己去看源码,查了一下,发现这个代码片段 这段代码不就说明了有openKeys就不会有defaultOpenK

  • vue.js Table 组件自定义列宽实现核心方法

    目录 前言 colgroup 和 col 核心实现 一些常量/变量定义 初始化表头列表 initColumns 处理含有固定宽度和最小宽的列 获取各列宽度,并组成一个数组 getWidthList 计算需要自适应的列宽度 getAdaptWidth 监听屏幕变化和属性更新 前言 如果你使用过类似于 ElementUI 的组件库,一定对如下的 API 属性不眼生,例如: <!-- Element UI --> <el-table-column prop="date" l

  • Extjs中RowExpander控件的默认展开问题示例探讨

    复制代码 代码如下: //展开符合某个条件的行 function expendRow() { var i;//循环临时变量 var arr = [];//要展开的行的数组 for(i=0;i<ProdRequireInfoStore.data.length;i++)//ProdRequireInfoStore是gridpanel的数据源 { var record = ProdRequireInfoStore.getAt(i);//循环遍历每一行 if(record.data.StatusID==

  • vue element-ui table表格滚动加载方法

    添加全局注册事件,用来监听滚动事件 window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.addEventListener('scroll', function() { let sign = 100 const scrollDistance = this.scrollHeight - this.

  • vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析

    本文实例讲述了vue基础之事件简写.事件对象.冒泡.默认行为.键盘事件.分享给大家供大家参考,具体如下: v-on:click/mouseover...... 简写的: @click=""        推荐 事件对象: @click="show($event)" 事件冒泡: 阻止冒泡: a). ev.cancelBubble=true;     b). @click.stop    推荐 默认行为(默认事件): 阻止默认行为: a). ev.preventDefa

  • vue element table 表格请求后台排序的方法

    1.ElementUi文档已经说了,如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据. <el-table :data="playerTableData" border style="width: 100%" :default-sort = "{prop: 'outlay', order: 'descendin

随机推荐