Vue + Element 表格文本域添加清空按钮：自定义组件实现

{/'title/':/'Vue + Element 表格文本域添加清空按钮：自定义组件实现/',/'description/':/'本文将介绍如何在Vue + Element UI的表格中，为文本域添加一个清空按钮（小叉号），通过自定义组件来实现便捷的清空功能。/',/'keywords/':/'Vue, Element UI, 表格, 文本域, 清空按钮, 自定义组件, v-model, 监听, 事件/',/'content/':/'//u003ctemplate//u003e//n //u003cdiv class=///'clearable-input///'//u003e//n //u003cinput v-model=///'inputValue///' type=///'text///' class=///'el-input__inner///'//u003e//n //u003ci v-if=///'inputValue///' class=///'el-icon-circle-close///' @click=///'clearInput///'//u003e//u003c/i//u003e//n //u003c/div//u003e//n//u003c/template//u003e//n//n//u003cscript//u003e//n export default {//n props: [//'value//'],//n data() {//n return {//n inputValue: this.value,//n };//n },//n watch: {//n value(newValue) {//n this.inputValue = newValue;//n },//n },//n methods: {//n clearInput() {//n this.inputValue = //'//';//n this.$emit(//'input//', //'//');//n },//n },//n };//n//u003c/script//u003e//n//n//u003cstyle scoped//u003e//n.clearable-input {//n position: relative;//n}//n//n.el-icon-circle-close {//n position: absolute;//n top: 50%;//n right: 10px;//n transform: translateY(-50%);//n cursor: pointer;//n}//n//u003c/style//u003e//n//n//u003ctemplate//u003e//n //u003cel-table :data=///'tableData///'//u003e//n //u003cel-table-column prop=///'name///' label=///'姓名///'//u003e//n //u003ctemplate slot-scope=///'scope///'//u003e//n //u003cclearable-input v-model=///'scope.row.name///'//u003e//u003c/clearable-input//u003e//n //u003c/template//u003e//n //u003c/el-table-column//u003e//n //u003c/el-table//u003e//n//u003c/template//u003e//n//n//u003cscript//u003e//nimport ClearableInput from //'./ClearableInput//';//n//nexport default {//n components: {//n ClearableInput,//n },//n data() {//n return {//n tableData: [//n { name: //'张三//' },//n { name: //'李四//' },//n { name: //'王五//' },//n ],//n };//n },//n};//n//u003c/script//u003e/