vue.js element-ui 怎么调用el-table内置的方法 sort,setCurrentRow
微wx笑
2021-01-12【前端开发】
5
0关键字：
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笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/front/2021-01-12/603.html
