1. 程式人生 > >vuejs+element UI table的常見的屬性及事件

vuejs+element UI table的常見的屬性及事件

一.table元件的方法,事件

檢視官網

二.常用的事件,屬性

(一).屬性

1.多選框(type = "selection") 需要實現勾選的功能

在<el-table> 內加入<el-table-column type="selection" width="55"></el-table-column>

2.  :data="tableData"  是table的資料繫結

<el-table :data="tableData">

export default {   
	data() {
		return{
			tableData: [],
		}
	}
}

3.formatter  用來格式化內容  

對table的值進行處理。Function(row, column, cellValue, index){}

A.使用formatter需要注意以下幾點:
  ①無論formatter出何種形式,格式化出的DOM一定都是被包含在預設的div標籤內
  ②在寫formatter函式時要保證有值返回,否則單元格沒有內容可展示,所以if的時候別忘了else

  ③formatter函式不會作用在列屬性checkbox為true的單元格上,checkbox列是元件預留的。

B。檢視小demo

<template>
	<el-table :data="tableData3"  ref="multipleTable">
		<el-table-column type="selection" width="55" ></el-table-column>
		<el-table-column type="index" label="序號" width="60"></el-table-column>
		<el-table-column prop="sex" label="性別" width="100" :formatter="formatSex"></el-table-column>
		<el-table-column prop="date" label="日期"></el-table-column>
		<el-table-column prop="name" label="姓名"></el-table-column>
		 <el-table-column prop="IsAudit"  :formatter="formatterColumn" label="稽核狀態" ></el-table-column>
		<el-table-column prop="address" label="地址"></el-table-column>
	</el-table>
</template>
<script>
export default {   
	data() {
		return {
	        tableData3: [{
	        	id:'1',
				date: '2016-05-03',
				name: '王小虎',
				address: '上海市普陀區金沙江路 1518 弄',
				IsAudit:0,
				sex:'1'
	        }, {
	        	id:'2',
				date: '2016-05-02',
				name: '王小虎',
				address: '上海市普陀區金沙江路 1518 弄',
				IsAudit:1,
				sex:'0'
	        }, {
	        	id:'3',
				date: '2016-05-02',
				name: '王小虎',
				address: '上海市普陀區金沙江路 1518 弄',
				IsAudit:10,
				sex:'-1'
	        }]
	    }
	},
	mounted() {
	},
	methods: {
		formatSex: function (row, column, cellValue, index) {
			return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
		},
		//狀態改成漢字
        formatterColumn(row, column) {
            switch(row.IsAudit){
                case 0:
	                return '未通過';
	                break;
                case 1:
	                return '稽核通過';
	                break;
                case 10:
	                return '待稽核';
	                break;
                case 9:
	                return '草稿';
	                break;
                default:
                	return '未知';
            }
        }
    }
}
</script>

4.selectable (row, index)  是否可以選中

注意:僅對 type=selection 的列有效,型別為 Function,Function 的返回值用來決定這一行的 CheckBox 是否可以勾選

使用:

<template>
	<el-table :data="tableData3"  ref="multipleTable" @row-click="handleCurrentChange">
		<el-table-column type="selection" width="55"  :selectable="selectable"></el-table-column>
	</el-table>
</template>
<script>
export default {   
	methods: {
        selectable(row, index){
        	if(index === 1){
        		return true;
        	}else{
        		return false;
        	}
        }
    }
}
</script>

只有第二條是可以選中 其他不能


(二).方法

1.row-click  點選行事件

<el-table   @row-click="handleRowChange">

handleRowChange(row, event, column){  row此行的資料      }

2.selection-change  獲取選中的所有值

<el-table   @selection-change="selectionRowsChange">

selectionRowsChange(val){ val  選中的值}

三.例項

2.簡單的增刪改


1.table tr 點選 複選框選中  再次點選 複選框取消選中

①設定一個全域性函式

exports.install = function (Vue, options) {  
    //刪除陣列 指定的元素  
    Vue.prototype.removeByValue=function(arr, val){  
        for(var i=0; i<arr.length; i++) {  
            if(arr[i] == val) {  
                arr.splice(i, 1);  
                break;  
            }  
        }  
    };  
};  
②tableUser.vue
<!--使用者名稱 增刪改 基本操作-->
<template>
	<section>
		<!--工具條-->
		<el-col :span="24" class="el-table_headtoolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters" class="userform" label-width="50px">
				<el-form-item label="姓名"  prop="name">
					<el-input v-model="filters.name" placeholder="姓名"  prefix-icon="el-icon-search"></el-input>
				</el-form-item>
				<el-form-item label="性別" prop="sex">
					<el-select v-model="filters.sex" filterable placeholder="請選擇" prop="sex">
					    <el-option v-for="item in sexOptions" :key="item.value"  :label="item.label" :value="item.value">
					    </el-option>
					</el-select>
				</el-form-item>
				<el-dropdown split-button type="primary" @click="btnSearch" trigger="click">
				  	檢索
					<el-dropdown-menu slot="dropdown" class="lyzbtn-group" trigger="click">
						<el-dropdown-item @click.native="btnReset">重置</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<el-dropdown split-button type="primary" @click="btnNew" trigger="click">
				  	新增
					<el-dropdown-menu slot="dropdown" trigger="click">
						<el-dropdown-item  @click.native="btnEdit">編輯</el-dropdown-item>
						<el-dropdown-item  @click.native="btnDelete">刪除</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-form>
		</el-col>
		<!--列表-->
		<el-table :data="users.slice((page-1)*pagesize,page*pagesize)"  highlight-current-row v-loading="listLoading"  style="width: 100%;"  @selection-change="selsUserChange" class="userTableJs" @row-click="handleRowChange"  ref="table">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" label="序號" width="60">
			</el-table-column>
			<el-table-column prop="name" label="姓名" width="120">
			</el-table-column>
			<el-table-column prop="sex" label="性別" width="100" :formatter="formatSex">
			</el-table-column>
			<el-table-column prop="age" label="年齡" width="100" >
			</el-table-column>
			<el-table-column prop="birth" label="生日" width="120">
			</el-table-column>
			<el-table-column prop="addr" label="地址" min-width="180">
			</el-table-column>
		</el-table>
		<!--工具條-->
		<el-col :span="24" class="el-table_footertoolbar">
			<el-pagination layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="pagesize" :total="users.length" style="float:right;">
			</el-pagination>
		</el-col>
		<!--新增介面-->
		<el-dialog title="新增" :visible.sync="addFormVisible">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="姓名" prop="name">
					<el-input v-model="addForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="性別">
					<el-radio-group v-model="addForm.sex">
						<el-radio class="radio" :label="1">男</el-radio>
						<el-radio class="radio" :label="0">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="年齡">
					<el-input-number v-model="addForm.age" :min="0" :max="200"></el-input-number>
				</el-form-item>
				<el-form-item label="生日">
					<el-date-picker type="date" placeholder="選擇日期" v-model="addForm.birth"></el-date-picker>
				</el-form-item>
				<el-form-item label="地址">
					<el-input type="textarea" v-model="addForm.addr"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
		<!--編輯介面-->
		<el-dialog title="編輯" :visible.sync="editFormVisible">
			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
				<el-form-item label="姓名" prop="name">
					<el-input v-model="editForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="性別">
					<el-radio-group v-model="editForm.sex">
						<el-radio class="radio" :label="1">男</el-radio>
						<el-radio class="radio" :label="0">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="年齡">
					<el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
				</el-form-item>
				<el-form-item label="生日">
					<el-date-picker type="date" placeholder="選擇日期" v-model="editForm.birth"></el-date-picker>
				</el-form-item>
				<el-form-item label="地址">
					<el-input type="textarea" v-model="editForm.addr"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>
    </section>
</template>
<script>
import util from '@/utils/index'//日期的操作
import { getUserListPage,batchRemoveUser,addUser,editUser} from '@/assets/api/api';//介面
export default {
	data() {
		return {
			filters: {
				name: ''
			},
			//性別
			sexOptions:[
				{value: '1',label: '男'}, 
				{value: '0',label: '女'}
			],
			users: [],//表格資料 
			page: 1,//當前頁數
			pagesize:10,//一頁顯示幾條
			listLoading: false,
			sels: [],//列表選中列
			total: 0,
			editFormVisible: false,//編輯介面是否顯示
			editLoading: false,
			editFormRules: {
				name: [{ required: true, message: '請輸入姓名', trigger: 'blur' }],
				birth: [{ type: 'date', required: true, message: '日期必須填寫', trigger: 'change' }]
			},
			//編輯介面資料
			editForm: {
				id:undefined,
				name: '',
				sex:-1,
				age: 0,
				birth:new Date(),
				addr: ''
			},

			addFormVisible: false,//新增介面是否顯示
			addLoading: false,
			addFormRules: {
				name: [{ required: true, message: '請輸入姓名', trigger: 'blur' },],
				birth: [{ type: 'date', required: true, message: '日期必須填寫', trigger: 'change' }]
			},
			//新增介面資料
			addForm: {
				name: '',
				sex: -1,
				age: 0,
				birth: new Date(),
				addr: ''
			},
			arrID:[],

		}
	},
	methods: {
		//性別顯示轉換
		formatSex: function (row, column) {
			return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
		},
		//初始頁page、初始每頁資料數pagesize和資料data
		handleSizeChange(size){
	        this.pagesize = size;
	    },
		handleCurrentChange(val) {
			this.page = val;
			this.getUsers();
		},
		handleRowChange(row, event, column){
			var same=false;
            if(this.arrID.length > 0){
				for(var i=0; i<this.arrID.length ;i++){
					if(this.arrID[i]==row.id){
						same=true;
						this.removeByValue(this.arrID, row.id);
						break;
					}
				}
				if(same==true){
	            	this.$refs.table.toggleRowSelection(row,false);
	            }else{
	            	this.$refs.table.toggleRowSelection(row,true);
	            	this.arrID.push(row.id);
	            }
            }else{
            	this.$refs.table.toggleRowSelection(row,true);
        		this.arrID.push(row.id);
            }
		},
		//獲取使用者列表
		getUsers() {
			let para = {
				page: this.page,
				name: this.filters.name,
				sex: this.filters.sex

			};
			this.listLoading = true;
			getUserListPage(para).then((res) => {
				this.users = res.data.users;
				this.total = res.data.total;
				this.listLoading = false;
				
			});
		},
		//檢索
		btnSearch(){
			console.log('檢索')
			var searchParams = { name: this.filters.name, sex: this.filters.sex };
				//searchUser(searchParams).then(data => {
				
				//});
		},
		//重置
		btnReset(){
			this.resetForm(".userform");
		},
		//新增
		btnNew(){
			this.addFormVisible = true;
		},
		//編輯
		btnEdit(){
			var ids = this.sels.map(item => item.id);
			if(ids =='' || ids.length >1){
				this.$alert('請選擇一條要編輯的記錄', '提示', {
					dangerouslyUseHTMLString: true
				});
			}else{
				const obj={};
				obj.id=this.sels.map(item => item.id).toString();
				obj.name=this.sels.map(item => item.name).toString();
				console.log(this.sels.map(item => item.sex).toString())
				if(this.sels.map(item => item.sex).toString() == 1){
					obj.sex=1;
				}else if(this.sels.map(item => item.sex).toString() == 0){
					obj.sex=0;
				}else{
					obj.sex=-1;
				}
				obj.age=this.sels.map(item => item.age).toString();
				obj.birth=this.sels.map(item => item.birth).toString();
				obj.addr=this.sels.map(item => item.addr).toString();
				this.editFormVisible = true;
				this.editForm = Object.assign({},obj);
			}

		},
		//刪除
		btnDelete(){
			var ids = this.sels.map(item => item.id).toString();
			if(ids ==''){
				this.$alert('請選擇要刪除的記錄', '提示', {
					dangerouslyUseHTMLString: true
				});
			}else{
				this.$confirm('確認刪除選中記錄嗎?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para = { ids: ids };
					batchRemoveUser(para).then((res) => {
						this.listLoading = false;
						//NProgress.done();
						this.$message({
							message: '刪除成功',
							type: 'success'
						});
						this.getUsers();
					});
				}).catch(() => {

				});
			}
		},
		//編輯
		editSubmit: function () {
			this.$refs.editForm.validate((valid) => {
				if (valid) {
					this.$confirm('確認提交嗎?', '提示', {}).then(() => {
						this.editLoading = true;
						//NProgress.start();
						let para = Object.assign({}, this.editForm);
						para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
						editUser(para).then((res) => {
							this.editLoading = false;
							//NProgress.done();
							this.$message({
								message: '提交成功',
								type: 'success'
							});
							this.$refs['editForm'].resetFields();
							this.editFormVisible = false;
							this.getUsers();
						});
					});
				}
			});
		},
		//新增
		addSubmit: function () {
			this.$refs.addForm.validate((valid) => {
				if (valid) {
					this.$confirm('確認提交嗎?', '提示', {}).then(() => {
						this.addLoading = true;
						//NProgress.start();
						let para = Object.assign({}, this.addForm);
						para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
						addUser(para).then((res) => {
							this.addLoading = false;
							//NProgress.done();
							this.$message({
								message: '提交成功',
								type: 'success'
							});
							this.$refs['addForm'].resetFields();
							this.addFormVisible = false;
							this.getUsers();
						});
					});
				}
			});
		},
		selsUserChange(sels) {
			this.sels = sels;
			if(sels.length>0){
				var valId=[];
	        	for(var i=0;i<sels.length;i++){
	        		var arrIDsame=false;
	        		valId.push(sels[i].id);
	        	}
	        	this.arrID=valId;
			}
		}
	},
	mounted() {
		this.getUsers();
		
	}
}
</script>

3.table行內編輯

vue slot的scope傳遞,要表述的意思元件中slot這個插槽上可以賦值各種屬性,在呼叫元件的頁面中可以使用<template slot-scope="props"> 來獲取插槽上的屬性值,獲取到的值是一個物件。

(1).一行一行編輯

<template>
	<el-table :data="tableData" style="width: 100%">
	    <el-table-column label="日期" width="180">
			<template slot-scope="scope">
		        <span>{{scope.row.date}}</span>
		    </template>
	    </el-table-column>
	    <el-table-column prop="name" label="姓名">
			<template slot-scope="scope">
	          	<span>{{scope.row.name}}</span>
	        </template>
		</el-table-column>
	    <el-table-column prop="address" label="地址">
			<template slot-scope="scope">
	          	<template v-if="scope.row.edit">
	            	<el-input class="edit-input" size="small" v-model="scope.row.address"></el-input>
	          	</template>
	         	<span v-else>{{ scope.row.address }}</span>
	        </template>
		</el-table-column>
	    <el-table-column label="操作">
			<template slot-scope="scope">
				<el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope.$index, scope.row)" size="small" icon="el-icon-circle-check-outline">儲存</el-button>
				<el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">編輯</el-button>
			</template>
	    </el-table-column>
	</el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
        	id:'1',
			date: '2016-05-02',
			name: '王小虎',
			address: '上海市普陀區金沙江路 1518 弄',
			edit:false
        }, {
        	id:'2',
			date: '2016-05-04',
			name: '王小虎',
			address: '上海市普陀區金沙江路 1517 弄',
			edit:false
        }, {
        	id:'3',
			date: '2016-05-01',
			name: '王小虎',
			address: '上海市普陀區金沙江路 1519 弄',
			edit:false
        }, {
        	id:'4',
			date: '2016-05-03',
			name: '王小虎',
			address: '上海市普陀區金沙江路 1516 弄',
			edit:false
        }]
      }
    },
    methods: {
		confirmEdit(index,row){
			row.edit = false;
			this.$message({
				message: '該地址已經成功修改',
				type: 'success'
			})
		}
    }
  }
</script>

(2).table批量編輯列欄位

<template>
	<section>
		<!--工具條-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-button v-if="editOk"  type="success" @click="btnOk" size="small" icon="el-icon-circle-check-outline">儲存</el-button>
			<el-button v-else="editOk" type="primary"  @click="btnEdit" size="small" icon="el-icon-edit">編輯</el-button>
		</el-col>
		<el-table :data="tableData" style="width: 100%">
		    <el-table-column label="日期" width="180">
				<template slot-scope="scope">
			        <span>{{scope.row.date}}</span>
			    </template>
		    </el-table-column>
		    <el-table-column prop="name" label="姓名">
				<template slot-scope="scope">
		          	<span>{{scope.row.name}}</span>
		        </template>
			</el-table-column>
		    <el-table-column prop="address" label="地址">
				<template slot-scope="scope">
		          	<template  v-if="editOk">
		            	<el-input class="edit-input" size="small" v-model="scope.row.address"></el-input>
		          	</template>
		         	<span v-else>{{ scope.row.address }}</span>
		        </template>
			</el-table-column>
		</el-table>
	</section>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [{
        	id:'1',
			date: '2016-05-02',
			name: '王小虎',
			address: '上海市普陀區金沙江路 1518 弄',
        }, {
        	id:'2',
			date: '2016-05-04',
			name: '王小虎',
			address: '上海市普陀區金沙江路 1517 弄',
        }, {
        	id:'3',
			date: '2016-05-01',
			name: '王小虎',
			address: '上海市普陀區金沙江路 1519 弄',
        }, {
        	id:'4',
			date: '2016-05-03',
			name: '王小虎',
			address: '上海市普陀區金沙江路 1516 弄',
        }],
        editOk:false
      }
    },
    methods: {
		btnEdit(){
			 this.editOk=true;
		},
		btnOk(){
			this.editOk=false;
		}
    }
  }
</script>

相關推薦

vuejs+element UI table常見屬性事件

一.table元件的方法,事件檢視官網二.常用的事件,屬性(一).屬性1.多選框(type = "selection") 需要實現勾選的功能在<el-table> 內加入<el-table-column type="selection" width="55"

element-ui table

eth src else post blog 同時 format bubuko 模板 額,最近有點頻繁記錄。感覺遇到了很多的問題。然後不斷的查,不斷的嘗試修改。然後得到解決。還是記錄關於element-ui的使用。這次是關於表格的使用。 表格使用其實平時用的話也

串口通信屬性事件解析

每一個 receive -h aid rec 結束 out soft 邏輯 RS-232串口,串口按位(bit)發送和接收字節。盡管比按字節(byte)的並行通信慢,但是串口可以在使用一根線發送數據的同時用另一根線接收數據。典型地,串口用於ASCII碼字符的傳輸

vue element ui table 過濾功能實現

Element UI程式碼 <template> <div> <el-table :data="tableData" style="width: 100%"> border`在這裡插入程式碼片` > &

vuejs+element UI 點選編輯表格某一行時獲取內容填入表單

handleEdit: function (index, row) { this.editFormVisible = true; this.editForm = Object.assign({}, row); } 詳細教程: 1.首先,做一個表格,用於顯示資訊;程式碼如下:

element-ui table 行內編輯

EditRow.ts interface NoParamConstructor&lt;T&gt; { new(): T; } export default class EditRow&lt;T&gt; { origin: T = null copy: T =

element ui table元件自定義合計欄,後臺給的資料

合計的資料是後臺傳的,所以用table元件自定義一行用來合計 <el-table border fit v-

CSS樣式的常見屬性

常見樣式屬性及值 字型: font -family -size -style: normal(正常)|italic(傾斜)|oblique -weight: normal|bold(粗體) 如果組合起來編寫: font: style weight size

element-ui Table表格結合CheckBox實現單選效果

最近做專案遇到一個需求,需要實現一個表格的單選,由於專案使用的是element-ui.於是去看了表格的文件,確實有單選的方法,但是官方的單選是直接選中表格行,通過顏色來區分 看著效果不明顯,實際需要一個複選框可以選擇,效果圖如下   於是自己結合elem

element ui Table表格自定義列模板結合Dialog彈框 編輯表格每一行的內容

Table表格部分 <template> <el-table :data="tableData" style="width: 100%"> <el-table-column label="日期

element-ui table表格內容相同自動合併

專案需求:第二列的內容如果相同,則合併單元格,並且序號也合併:  實現方法: 1.rowspan()方法在獲取資料之後呼叫 rowspan() { this.spanArr = [];//在data裡面定義 this.position = 0;

如何在element-ui table 取到對應的ID的最後一個對象

this data index == push ret gui state fault 來回切換3個狀態值如何得到對應ID的最後一個對象 var is_push = () => { for (var i = 0; i < this.form.FaultDev

vue element-ui table表格滾動載入

新增全域性註冊事件,用來監聽滾動事件 window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap =

node npm vuejs element-ui安裝步驟

1.下載對應本機環境安裝 nodejs 預設NPM已經整合    https://nodejs.org/zh-cn/      開啟cmd直接輸入測試是否安裝成功   node測試 node -v    NP

Unity3D中Animation的常見屬性方法

Unity3D中Animation的常見屬性及方法如下: Animation.Play播放 function Play (mode : PlayMode = PlayMode.StopSameLayer) : bool function Play (animation : string, mode :

Element-UI table排序問題

專案需求:選擇框與表格的排序列雙向繫結 選擇器: 表格 表頭行: <!-- 選擇器 --> <el-select v-model="metricValue" placeholder="請選擇"> <el-optio

springboot shiro和freemarker、vuejs/element-ui集成之控制按鈕權限完全參考手冊

red 功能 使用 marker nib vuejs book redis guid 本文主要考慮單點登錄場景,登錄由其他系統負責,業務子系統只使用shiro進行菜單和功能權限校驗,登錄信息通過token從redis取得,這樣登錄驗證和授權就相互解耦了。 用戶、角色、權限進

lumen+vuejs+element-ui+axios+ueditor跨域上傳單張圖片

首先採用了lumen作為後臺,提供api 前端採用了vuejs+element-ui+axios 編輯器採用了 ueditor 這裡說明的是ueditor的跨域上傳單張圖片 下面介紹的是ueditor的跨域上傳單張圖片的功能 vuejs的static原始

jQuery UI table tr 點選事件 背景藍色

jQuery UI 中的table,每個 tr 有單機事件,當點選某一個 tr 後,被點選 tr 背景色變藍,其他 tr 無背景色。 <table id="xxxGrid"></table> 遇到的問題:使用 js 或者 jQuery 動態新增的

vue使用element-ui 監聽使用回車鍵事件

因為element-ui 對input做了封裝,使用@keyup.enter="fn"觸發Enter鍵事件就不會觸發,解決:後面追加.native。@keyup.enter.native="submi