element ui表格加载数据后默认勾选状态为选中效果
这个效果非常简单，this.$refs.multipleTable.toggleRowSelection(row);row代表传进来的数据加索引值，比如this.$refs.multipleTable.toggleRowSelection(this.tableData[0]);代表选中第一条，...
这个效果非常简单，this.$refs.multipleTable.toggleRowSelection(row);row代表传进来的数据加索引值，比如this.$refs.multipleTable.toggleRowSelection(this.tableData[0]);代表选中第一条，如果括号内什么都不写，代表清空选中，下面的例子是通过数据中的zhuangtai来判断是否选中，可以在请求数据渲染后执行这个方法。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入样式 -->
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.css" rel="stylesheet">
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.js"></script>
</head>
<body>
<div id="app">
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip>
</el-table-column>
</el-table>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
zhuangtai:'2'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
zhuangtai:'1'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
zhuangtai:'2'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
zhuangtai:'2'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
zhuangtai:'1'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
zhuangtai:'1'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
zhuangtai:'2'
}],
multipleSelection: []
},
mounted() {
for(let i=0;i<this.tableData.length;i++){
if(this.tableData[i].zhuangtai=='2'){
this.$refs.multipleTable.toggleRowSelection(this.tableData[i]);
}
}
},
methods: {
// 获取选中的数据
handleSelectionChange(val) {
console.log('下面打印的是选中的数据')
console.log(val)
this.multipleSelection = val;
},
}
})
</script>
</body>
</html>
效果：
- 发表于 2021-01-08 13:51
- 阅读 ( 694 )
- 分类：web前端开发
