下面是一個(gè)使用Vue和Element UI組件的例子：

<template>
<div>
<el-input v-model="inputValue" placeholder="請輸入內(nèi)容"></el-input>
<el-button @click="addToList">添加到列表</el-button>
<el-table :data="listData">
<el-table-column label="內(nèi)容" prop="text"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="text" @click="removeFromList(scope.$index)">刪除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: '',
listData: [{ text: '默認(rèn)項(xiàng)' }]
};
},
methods: {
addToList() {
if (this.inputValue.trim()) {
this.listData.push({ text: this.inputValue.trim() });
this.inputValue = '';
}
},
removeFromList(index) {
this.listData.splice(index, 1);
}
}
};
</script>

本例子展示了如何使用Element組件構(gòu)建一個(gè)簡單的待辦事項(xiàng)列表：

• 使用el-input獲取用戶輸入并將其綁定到inputValue變量上
• 使用el-button添加待辦事項(xiàng)到listData數(shù)組中
• 使用el-table展示待辦事項(xiàng)列表，并使用el-table-column配置表頭和列數(shù)據(jù)
• 使用template和slot-scope定制列中的操作按鈕
• 綁定removeFromList方法實(shí)現(xiàn)刪除功能

通過這個(gè)例子，我們可以看到Vue和Element的組合使用可以大大簡化前端開發(fā)中常見的UI組件和交互設(shè)計(jì)，提高開發(fā)效率和代碼可維護(hù)性。