1.父组件
<template>
<div>
<el-tag
v-for="tag in dynamicTags"
:key="tag.address"
class="mx-1"
closable
:disable-transitions="false"
@close="handleClose(tag)"
>
{{ tag.name }}
</el-tag>
<el-button @click="dialogTableVisible">
open a Table nested Dialog
</el-button>
<aa ref="aaRef" @removeItem="removeItem"/>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, watchEffect, nextTick } from "vue";
import aa from "../components/aa.vue";
export default defineComponent({
components: { aa },
setup() {
const aaRef = ref()
const dialogTableVisible =()=>{
aaRef.value.open(dynamicTags.value)
}
const dynamicTags=ref([])
const removeItem=(val)=>{
dynamicTags.value = val
console.log('拿到的选中项',val, dynamicTags.value);
}
const handleClose=(tag)=>{
console.log("移除", tag);
dynamicTags.value = dynamicTags.value.filter(
(item) => item.id !== val.id
);
}
return {
aaRef,
dialogTableVisible,
removeItem,
dynamicTags,
handleClose,
};
},
});
</script>
2、子组件
1、 使用toggleRowSelection来回显,并在nextTick中执行
<template>
<div>
<el-dialog
v-model="dialogTableVisible"
title="Shipping address"
ref="multipleTableRef"
style="width: 100%"
>
<el-table ref="tableRef" :data="gridData" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column property="date" label="Date" width="150" />
<el-table-column property="name" label="Name" width="200" />
<el-table-column property="address" label="Address" />
</el-table>
<template #footer>
<div class="dialog-footer">
<el-button @click="outerVisible">Cancel</el-button>
<!-- <el-button type="primary" @click="handleSelectionChange">
open the inner Dialog
</el-button> -->
</div>
</template>
</el-dialog>
</div>
</template>
<script lang="ts">
import {
defineComponent,
reactive,
onMounted,
ref,
watch,
nextTick,
} from "vue";
export default defineComponent({
emits: ["removeItem"],
components: {},
props: {},
setup(props, ctx) {
const dialogTableVisible = ref(false);
const dialogFormVisible = ref();
const formLabelWidth = "140px";
const form = reactive({
name: "",
region: "",
date1: "",
date2: "",
delivery: false,
type: [],
resource: "",
desc: "",
});
const gridData = ref([
{
id: "1",
date: "2016-05-03",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
id: "2",
date: "2016-05-02",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
id: "3",
date: "2016-05-04",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
id: "4",
date: "2016-05-01",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
id: "5",
date: "2016-05-08",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
id: "6",
date: "2016-05-06",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
{
id: "7",
date: "2016-05-07",
name: "Tom",
address: "No. 189, Grove St, Los Angeles",
},
]);
const multipleTableRef = ref();
const dataList = ref();
const handleSelectionChange = (val) => {
dataList.value = val;
console.log(123, val);
};
const outerVisible = () => {
dialogTableVisible.value = false;
ctx.emit("removeItem", dataList.value);
};
const tableRef=ref()
const open = async (rows) => {
// async awwait nextTick() 等待table渲染完成再去回显
dialogTableVisible.value = true;
await nextTick()
toggleSelection(rows.map(item=>item.id));
};
// 这里的rows为id的list
const toggleSelection = (rows) => {
console.log("rowws",rows);
// setTimeout(() => {
// nextTick(() => {
// 用gridData 去匹配rows 已选中的 如果匹配不上要取消选中
gridData.value.forEach(row=>{
tableRef.value.toggleRowSelection(row, rows.includes(row.id));
})
// });
// }, 200);
};
return {
gridData,
form,
dialogFormVisible,
formLabelWidth,
dialogTableVisible,
multipleTableRef,
dataList,
tableRef,
handleSelectionChange,
outerVisible,
open,
};
},
});
</script>
<style scoped>
.el-button--text {
margin-right: 15px;
}
.el-select {
width: 300px;
}
.el-input {
width: 300px;
}
.dialog-footer button:first-child {
margin-right: 10px;
}
</style>
效果
3. 表格单选
// 单选框选中数据
const handleSelectionChange = (val) => {
dataList.value = val;
if (val.length > 1) {
tableRef.value.clearSelection();
tableRef.value.toggleRowSelection(val.pop());
}
};
4.禁用选择
<el-table-column type="selection" width="55" :selectable="checkSelectable"/>
js中
const checkSelectable = (row) => {
return row.isFile;
};