javascript
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<script src="https://unpkg.com/vue@3"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const useInputEffect = ()=>{
const{ref}=Vue;
const inputValue = ref("111");
const handleInputChange = (newValue) => {
inputValue.value = newValue;
};
return {
inputValue,
handleInputChange,
}
}
const useListEffect=()=>{
let itemId=0;
const{reactive,toRefs}=Vue;
// const list = reactive([{content:"vue3"},{content:"yingyu"},{content:"shujujiegou"}]);
let listObj = reactive({list:[]});
let {list} = toRefs(listObj);
let multiSelection = reactive([]);
const addItemToList = (item)=>{
listObj.list.push({ id:++itemId,content: item.value });
item.value="";
}
const handlSelectionChange = (val)=>{
multiSelection=val;
}
const handleDelete = ()=>{
let list = listObj.list;
if(multiSelection.length===0){
alert("未选择");
return;
}
multiSelection.forEach((selectedItem) => {
list = list.filter((listItem)=>listItem.id!=selectedItem.id);
});
listObj.list = list;
}
return {
list,
addItemToList,
handlSelectionChange,
handleDelete,
handlSelectionChange,
};
}
const app = Vue.createApp({
setup() {
const{inputValue,handleInputChange}=useInputEffect();
const{list,
addItemToList,
handlSelectionChange,
handleDelete,
}=useListEffect();
const handleSubmit=()=>{
addItemToList(inputValue)
}
return {
inputValue,
handleInputChange,
handleSubmit,
list,
addItemToList,
handlSelectionChange,
handleDelete,
};
},
template: `
<div>
<div>
<el-input style="width:300px" :modelValue="inputValue" @input="handleInputChange"></el-input>
<el-button @click="handleSubmit">提交</el-button>
</div>
<el-table
border
:data="list"
@selection-change="handlSelectionChange"
style="width: 200px;">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="content"
label="待办事项"
width="199">
</el-table-column>
</el-table>
<el-button @click="handleDelete">删除</el-button>
</div>
`,
});
app.use(ElementPlus);
const vm = app.mount("#root");
</script>
</html>
