关于vue.js:elementui之eltable的使用合集

31次阅读

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

对于 element-ui 应用中的其余问题请 点这里

一、el-table 翻页序号间断

// 办法一
<el-table-column label="序号" type="index" width="50" align="center">
      <template v-slot="{$index}">
          <span>{{$index + pageSize * ( currentPage - 1) + 1 }}</span>
      </template>
</el-table-column>

// $index 以后序号  pageSize 每页显示的条数  currentPage 以后页码
// 办法二
<el-table-column label="序号" type="index" width="50" align="center" :index="tableIndex"/>

// 文档中 index 的类型能够是 Function(index)，这里绑定一个办法，将返回值赋给 index, 即该行的索引

...
methods: {tableIndex(index) {return index + this.pageSize * ( this.currentPage - 1) + 1
    }
}

二、el-table el-pagination 分页页数从 0 开始

我的项目中的需要：后端返回的接口数据是从第 0 页开始的，el-pagination 中当前页数默认是从 1 开始的，也就是点击 el-pagination 的第 1 页传递给后端的页数是 0，点击第 2 页传递 1，点击第 3 页传递 2 … …

<el-pagination
    background
    :current-page="currentPage"
    :page-size="pageSize" />
        
export default{data() {
        return {
            currentPage: 1, // 当前页数
            pageSize: 10, // 每页显示条目个数
        }
    },
    computed: {queryParams () {
            return {
                page: this.currentPage - 1,
                size: this.pageSize
            }
        }
    }
}
// 调用接口的时候把 queryParams 传递过来就能够了

三、el-table 应用 v-loading 报错

在我的项目中按需引入 element-ui 的时候，应用 el-table 的 v -loading 报错，如下：

github 上也有相干 issues，点这里查看

解决办法很简略，在 main.js 中将 loading 引入 use 一下就好了，我是将 element 按需引入的组件独自抽离进去了，如下图

四、在 el-table 表格中应用 radio 单选按钮

我的项目需要如下图：

而后要将选中数据 id 传递给后端。具体代码如下：

<el-table>
     <el-table-column label="抉择">
         <template slot-scope="scope">
              <el-radio v-model="radioStatus" :label="scope.$index" 
          @change.native="getRowSelected(scope.$index, scope.row)"
                  > &nbsp; </el-radio>
        </template>
    </el-table-column>
    ... ...
</el-table>

export defalut {data() {
        return {
            radioStatus: false, // 是否被选中，默认都是 false
            selectedId: '' // 选中数据的 id
        }
    },
    methods: {
        // 获取选中数据
        getRowSelected(index, row) {this.selectedId = row.id}
    }
}

留神：radio 的 label 肯定要设为不同的值，否则点击一个 radio 会选中全副。如果不要显示 label，通过款式管制其暗藏就能够了。

五、el-table 扭转单元格某一列的款式

表格中某一列的数值依据不同等级展现不同的背景色。具体需要如下：

通过 table 的 cell-style 属性，能够设置一个固定的 Object 或 Function({row, column, rowIndex, columnIndex})，这里用了回调的办法。实现代码如下：

<el-table :data="tableData" style="width: 100%" border :cell-stlye="set_cell_style">
     <el-table-column label="抉择">
         ... ...
    </el-table-column>
</el-table>

... ...
methods: {set_cell_style({row, column, rowIndex, columnIndex}) {if(row.errorNum > 20 && column.label === '检测谬误数') {
            return {  // 返回对象
                background: '#F56C6C', color: 'white'
            }
        } else if(row.errorNum > 10 && column.label === '检测谬误数') {
            return {background: '#E6A23C', color: 'white'}
        } else if(row.errorNum > 0 && column.label === '检测谬误数') {return 'background: #67C23A; color: white' // 返回字符串}
    }
}
// row 行数据对象  column 列对象
// 上述 column.label === '检测谬误数' 等价于 columnIndex === 4
// 用 label 次要是免得表格展现程序更换，columnIndex 也得相应的更改

留神：应用 function 时 return 的返回值如果是 string 类型，在开发环境是能够失效的，然而打包上线后生效。所以如果 应用 function，要返回 object 类型。

六、el-table 动静生成表头

el-table 依据后端返回的数据，动静生成表头并展现相应的值。如后端返回的数据如下：

要求显示如下：

其中 name, id, salary 用于表头的 label 显示，并通过 prop 绑定这些数据的值。具体实现如下：

// 解决后端返回的数据 data，并定义 ruleTableLabel 存储 label
data.map(item => {Object.keys(item).map(key => {!this.ruleTableLabel.includes(key) && this.ruleTableLabel.push(key)
    })
})

// 循环并绑定 prop
<el-table-column v-for="(key, i) in ruleTableLabel" :key="i" :label="key" :prop="key"></el-table-column>

七、el-table 列应用 fixed 属性后，与其余列呈现错位

具体谬误如下图所示：

其中操作列设置了固定，初始展现列表页时没啥问题，然而从详情页返回时就呈现了这样一个错位，用了 doLayout 办法也不行。而后把款式 el-table__fixed-body-wrapper 的 top 值批改成表头的高度就能够了。

八、el-table-column 增加 show-overflow-tooltip 的内容超长，鼠标放上去后始终闪动

这里次要是显示后端返回的日志信息，然而因为这个数据比拟多，而且应用 show-overflow-tooltip 的列文本内容超长，最小的也有 10+kb，而后鼠标放上去的时候就始终闪动，残缺的内容也显示不进去。具体问题如下图：

而后用了 el-tooltip 代替 show-overflow-tooltip 这个属性，具体代码如下：

<el-table-column prop="logMsg" label="日志信息" show-overflow-tooltip align="center">
    <template slot-scope="scope">
        <el-tooltip effect="light" :content="scope.row.logMsg" popper-class="log-tooltip" :disabled="scope.row.logMsg | ellipsis" placement="top">
            <span v-if="scope.row.logMsg.length > 100">{{scope.row.logMsg.split(0, 100)[0] + '...' }}</span>
            <span v-else>{{scope.row.logMsg}}</span>
        </el-tooltip>
    </template>
</el-table-column>

增加过滤器和款式：

// 增加过滤器
filters: {
    // 如果文本内容长度少于 100，就不显示 tooltip 组件
    ellipsis (value) {if (value.length > 100) {return false}
          return true
    }
}

// 并给 tooltip 组件增加款式
.log-tooltip.el-tooltip__popper{
    max-width: 90%;
    height: 90%;
    left: 5%;
    right: 5%;
    top: 5%;
    bottom: 5%;
    margin: 0 auto;
    overflow: scroll;
}

留神：el-tooltip__popper 的款式如果增加在 scoped 中是不失效的，因为元素默认是追加在 body 的。通过 popper-class 属性对款式进行限定，否则其余页面有用到 el-tooltip 的款式会被笼罩。

九、el-table 带翻页的全选

在应用 element-ui 的 el-table 组件展现数据时，有时会要求批量提交不同页面勾选数据的性能，当切换分页时，可能记忆所有页面勾选的数据，而后进行批量操作。官网也没有间接提供案例来实现这种业务需要，但能够通过设置 row-key、reserve-selection 和 selection-change 事件来实现。

  • reserve-selection：仅对 type=selection 的列无效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据。
  • row-key：行数据的 Key，用来优化 Table 的渲染；在应用 reserve-selection 性能与显示树形数据时，该属性是必填的。次要用来示意每行数据是通过哪个属性来进行辨别，个别应用 id。
  • selection-change：当选择项发生变化时会触发该事件。参数 selection 将是所有页面曾经勾选的数据。
<template>
    <el-card>
        <el-table :table-loading="loading"
            :tableData="tableData"
            ref="tableRef"
            :row-keys="getRowKeys"
            @selectionChange="selectionChange">
            <el-table-column :reserve-selection="true" type="selection" width="55" />
            ... ...
        </el-table>
        <com-pagination
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            :total="total"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange" />
    </el-card>
</template>

<script>
    export default {
        name: 'index',
        data() {
            return {tableData: [], // 表格数据
                pageSizes: [20, 50, 100],
                total: 0,
                pageSize: 20,
                currentPage: 1,
                loading: false,
                multipleSelectionIds: [], // 所有选中的数据 id 汇合蕴含跨分页数据
                getRowKeys(row) { // 获取 row 的 key 值，并返回 row.id 为每行记录的惟一标识
                    return row.id
                }
            }
        },
        computed: {
            // 申请数据列表的参数
            queryParams() {
                return {
                    //... 其余参数,
                    page: this.currentPage,
                    limit: this.pageSize
                }
            }
        },
        mounted() {this.queryList()
        },
        methods: {queryList() {
                // 调用后端接口，获取 table 表格数据
                ......
            },
            // 选中事件：单选或单页全选
            selectionChange(selection) {this.multipleSelectionIds = selection.map(item => item.id)
            },
            // 切换页码
            handleSizeChange(val) {
                this.pageSize = val
                this.queryList()},
            // 翻页
            handleCurrentChange(val) {
                this.currentPage = val
                this.queryList()}
        }
    }
</script>

如果是所有数据的全选，增加一个全选的按钮，在传参的时候跟后端约定一个全选的标识，因为增加了分页性能，默认只能从接口获取到一页的数据而不是所有的，通过约定的全选标识让后端解决所有数据的全选。页面展现的数据是否选中，只须要监听一下 tableData 的数据变动，而后通过 this.$refs.table.toggleRowSelection(row, true) 来设置行的选中状态就能够了。

十、el-table 中 type=selection 的列自定义 label 文字

  • 应用表格属性：header-cell-class-name，为单元格设置 className，而后自定义款式
<el-table :data="tableData" ref="table" :header-cell-class-name="cellclass" style="width: 100%"/>
    ... ...
</el-table>          

methods: {cellclass(row){if(row.columnIndex === 0){return 'table-selection'}
    }
}
  • 应用属性 label-class-name 给当前列自定义 className 和款式
<el-table-column label-class-name="table-selection" type="selection"></el-table-column>

以上这两种办法的款式批改如下：

<style lang="less" scoped>
    .el-table /deep/.table-selection .cell .el-checkbox__input{display:none;}
    .el-table /deep/.table-selection .cell:before{
        content: "抉择";
        position: relative;
    }
</style>
  • 间接批改 el-table selection 的默认款式
<style lang="less" scoped>
    .el-table__header .el-table-column--selection .cell .el-checkbox {display:none;}
    .el-table__header .el-table-column--selection .cell:before {content: "抉择";}
</style>
  • 重写 selection 列
<el-table :data="tableData" style="width: 100%">
    <el-table-column label="抉择" width="50">
        <template slot-scope="scope">
            <el-checkbox></el-checkbox>
        </template>
    </el-table-column>
</el-table>

十一、el-table 数据的简略筛选过滤

个别波及到 table 表格数据的筛选过滤，都是通过调用后端接口来实现的。

在之前的我的项目中，有几个页面的列表数据，筛选条件只有一个，后端懒得加，就只好本人弄了一个简略的过滤展现。具体如下：

//this.name 过滤条件  tableData 列表数据
<el--table :table-loading="loading" ref="table" 
    :tableData="tableData.filter(d => d.name.indexOf(this.name) > -1)">
</el-table>

这种办法如果筛选条件多了就不行了，还是得须要后端解决

正文完
vue.js
发表至： vue.js
2020-09-16
 0
关于vue.js:在vue中使用HTML5-Web-SQL-浏览器数据库
vuecli30-配置Iview定制主题
关于vue.js:自定义-FullCalendar-v5-Vue2
关于vue.js:智汀云盘开发指南web部署应用