vue.js element-ui 怎么调用el-table内置的方法 sort,setCurrentRow
微wx笑2021-01-12 11:38:06【前端开发】人已围观关键字:
vue.js element-ui el-table 内置方法
vue.js element-ui 怎么调用el-table内置的方法 sort,setCurrentRow这需要使用vue原生ref属性,element-ui 的例子中有使用,但是没有介绍。绑定 ref 就可以拿到组件对象。
vue.js element-ui 怎么调用el-table内置的方法 sort,setCurrentRow
这需要使用vue原生ref属性,element-ui 的例子中有使用,但是没有介绍。绑定 ref 就可以拿到组件对象。
看到很多文章介绍通过 this.$refs.table 调用,还觉得很奇怪,难道一个页面只能存在一个 el-talbe 对象?
后来才知道原来是可以通过 ref="组件对象名称" 的方式自己定义的。
相关html
<template> <el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%"> <el-table-column type="index" width="50"> </el-table-column> <el-table-column property="date" label="日期" width="120"> </el-table-column> <el-table-column property="name" label="姓名" width="120"> </el-table-column> <el-table-column property="address" label="地址"> </el-table-column> </el-table> <div style="margin-top: 20px"> <el-button @click="setCurrent(tableData[1])">选中第二行</el-button> <el-button @click="setCurrent()">取消选择</el-button> </div> </template>
相关JS
<script> export default { data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }], currentRow: null } }, methods: { setCurrent(row) { this.$refs.singleTable.setCurrentRow(row); }, handleCurrentChange(val) { this.currentRow = val; } } } </script>
代码摘自:https://element.eleme.cn/#/zh-CN/component/table
本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。