Vue 3结合element plus(问题总结)之 table组件实现多选和清除选中
一直出现toggleRowSelection和clearSelection不是方法
·
问题描述和原因
一直出现toggleRowSelection和clearSelection不是方法
问题解决
后来发现getCurrentInstance支持访问内部组件实例。
getCurrentInstance 只能在 setup 或生命周期钩子中调用。
如需在 setup 或生命周期钩子外使用,请先在 setup 中调用 getCurrentInstance() 获取该实例然后再使用。
小案例
<template >
<div id="shoplist">
<el-table
ref="multipleTableRef"
:data="data.arr"
style="width: 100%"
height="90%"
stripe
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="40" />
<el-table-column property="shopname" label="店名" width="120" show-overflow-tooltip/>
<el-table-column property="score" label="评分" sortable width="80" />
<el-table-column property="sales" label="销量" sortable width="80" />
<el-table-column property="type" label="类型" width="70" />
</el-table>
<div style="margin-top: 20px; margin-left:20px">
<el-button @click="toggleSelection(data.arr)">全选</el-button>
<el-button @click="toggleSelection()">清除</el-button>
</div>
</div>
</template>
<script>
import { onMounted, ref, watch } from 'vue' ;
import { getCurrentInstance } from 'vue'
import {ElTable} from 'element-plus'
import { reactive, toRaw, toRefs } from '@vue/reactivity';
export default {
setup () {
const instance = getCurrentInstance();
const multipleTableRef = ref(null);
const multipleSelection = ref([]);
var toggleSelection =(rows)=>{
var ultipleTabInstance = toRefs(instance.refs.multipleTableRef)
console.log(ultipleTabInstance.toggleRowSelection);
if(rows){
rows.forEach(row => {
ultipleTabInstance.toggleRowSelection.value(row, undefined)
});
}else{
ultipleTabInstance.clearSelection.value()
}
}
onMounted(()=>{
// console.log(multipleTableRef);
})
var handleSelectionChange =(val)=>{
multipleSelection.value = val;
}
var data = reactive({
arr:[ {
id:1,
shopname:"沙县小吃",
score:5.5,
sales:1200,
hh:12,
type:"快餐"
},
{
id:2,
shopname:"法式牛排餐厅",
score:7.5,
sales:2400,
hh:12,
type:"西餐"
},
{
id:3,
shopname:"沙县大吃",
score:6.5,
sales:200,
hh:12,
type:"快餐"
},
{
id:4,
shopname:"南昌瓦罐汤",
score:6.9,
sales:2400,
hh:12,
type:"快餐"
},
]
})
return {
data,
multipleTableRef,
toggleSelection,
handleSelectionChange,
}
},
}
</script>
<style>
#shoplist{
position: fixed;
z-index: 1001;
width: 390px;
height: 100%;
min-height: 100vh;
right: 0px;
bottom: 0px;
padding-top: 5px;
background-color: #f2f2f2;
transition: 1s;
/* overflow: hidden; */
border: 1px solid #333;
}
</style>
更多推荐
已为社区贡献5条内容
所有评论(0)