vue中實現(xiàn)可編輯table及其中加入下拉選項

更新時間：2022年08月13日 15:29:28 作者：等櫻花的龍貓

這篇文章主要介紹了vue中實現(xiàn)可編輯table及其中加入下拉選項，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

可編輯table及其中加入下拉選項

<template>
?? ?<div>
?? ?
? ? ? ? <el-table :data="tabledatas" border>
? ? ? ? ? ? <el-table-column label="姓名">
? ? ? ? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? ? ? ? ? <el-input placeholder="請輸入內(nèi)容" v-show="scope.row.show" v-model="scope.row.name"></el-input>
? ? ? ? ? ? ? ? ? ? <span v-show="!scope.row.show">{{scope.row.name}}</span>
? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? </el-table-column>
? ? ? ? ? ??
? ? ? ? ? ? <el-table-column label="年齡">
? ? ? ? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? ? ? ? ? <el-input placeholder="請輸入內(nèi)容" v-show="scope.row.show" v-model="scope.row.age"></el-input>
? ? ? ? ? ? ? ? ? ? <span v-show="!scope.row.show">{{scope.row.age}}</span>
? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? </el-table-column>
? ? ? ? ? ? <el-table-column label="地址">
? ? ? ? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? ? ? ? ? <el-input placeholder="請輸入內(nèi)容" v-show="scope.row.show" v-model="scope.row.address"></el-input>
? ? ? ? ? ? ? ? ? ? <span v-show="!scope.row.show">{{scope.row.address}}</span>
? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? </el-table-column>
? ? ? ? ? ? <el-table-column label="學(xué)籍">
? ? ? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? ? ? <span v-show="!scope.row.show">{{scope.row.stu}}</span>
? ? ? ? ? ? ? <el-select v-model="scope.row.stu" placeholder="請選擇" v-show="scope.row.show" >
? ? ? ? ? ? ??
? ? ? ? ? ? ? ? <el-option
? ? ? ? ? ? ? ? ? v-for="item in options"
? ? ? ? ? ? ? ? ? :key="item.stu"
? ? ? ? ? ? ? ? ? :label="item.stu"
? ? ? ? ? ? ? ? ? :value="item.stu">
? ? ? ? ? ? ? ? </el-option>
? ? ? ? ? ? ? </el-select>
? ? ? ? ? ? ? </template>
? ? ? ? ? ? </el-table-column>
? ? ? ? ? ? <el-table-column label="操作">
? ? ? ? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? ? ? ? ? <el-button @click="scope.row.show =true" >編輯</el-button>
? ? ? ? ? ? ? ? ? ? <el-button @click="scope.row.show =false">保存</el-button>
? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? </el-table-column>
? ? ? ? </el-table>
? ? ? </div>?
</template>

<script>
	export default {
		data(){
    	return {
    	options: [{
          	value: '選項1',
          	stu: '初中'
        	}, {
          	value: '選項2',
          	stu: '高中'
        	}, {
	          value: '選項3',
	          stu: '大專'
	        }, {
	          value: '選項4',
	          stu: '本科'
	        }, {
	          value: '選項5',
	          stu: '博士'
	        }],
	        value: '',
	      tabledatas: [
	                    { name: '李一', age: '19',address:"寧波",stu:"本科",show:false},
	                    { name: '郭明', age: '23',address:"四川",stu:"本科",show:false},
	                    { name: '天天', age: '12',address:"海南",stu:"初中",show:false},
	                    { name: '隆', age: '40',address:"上海",stu:"博士",show:false},
	                ],
	    }
	}
</script>

可以通過設(shè)置js里的show:true讓該行處于默認編輯狀態(tài)

出來效果圖

vue表頭下拉選擇框使用總結(jié)

1.在el-table-culumn中，加入template標(biāo)簽

使用：

<template slot="header" slot-scope="scope">
? <el-dropdown trigger="click" @command = "handleCommand">
? ? <span>類型</span>
? ? <el-dropdown-menu slot="dropdown">
? ? ? <el-radio-group v-model="sx">//這里，會出現(xiàn)一個bug，下文有解決辦法
? ? ? ? <el-dropdown-item command="屬性0"><el-radio label="0">屬性0</el-radio> </el-dropdown-item>
? ? ? ? <el-dropdown-item command="屬性1"><el-radio label="1">屬性1</el-radio> </el-dropdown-item>
? ? ? ? <el-dropdown-item command="屬性2"><el-radio label="2">屬性2</el-radio> </el-dropdown-item>
? ? ? ? <el-dropdown-item command="屬性3"><el-radio label="3">屬性3</el-radio> </el-dropdown-item>
? ? ? ? <el-dropdown-item command="屬性4"><el-radio label="4">屬性4</el-radio> </el-dropdown-item>
? ? ? ? <el-dropdown-item command="屬性5"><el-radio label="5">屬性5</el-radio> </el-dropdown-item>
? ? ? ? <el-dropdown-item command="屬性6"><el-radio label="6">屬性6</el-radio> </el-dropdown-item>
? ? ? </el-radio-group>
? ? </el-dropdown-menu>
? </el-dropdown>
</template>
<template slot-scope="scope">（表中元素）</template>

2.設(shè)置handleCommand方法

（當(dāng)時沒使用handleCommand方法做緩沖，在刷新時，第一次刷新不會賦值，第二次刷新會得到上次刷新的值。）

handleCommand(command) {
? if(command == '屬性0' ){
? ? this.sx= '0'
? } else if (command === '屬性1') {
? ? this.sx = '1'
? } else if( command === '屬性2') {
? ? this.sx = '2'
? } else if (command === '屬性3') {
? ? this.sx = '3'
? } else if (command === '屬性4') {
? ? this.sx = '4'
? } else if( command === '屬性5') {
? ? this.sx = '5'
? } else if (command === '屬性6') {
? ? this.sx = '6'
? }
? this.刷新方法;
},

但是在使用過程中，點擊下拉框中數(shù)據(jù)時，會出現(xiàn)執(zhí)行兩次handleCommand()方法的情況。通過一天的詢問與查找，得到解決辦法。

問題出現(xiàn)在<el-radio>標(biāo)簽上，當(dāng)點擊框中數(shù)據(jù)時，數(shù)據(jù)響應(yīng)一次handleCommand()方法，<el-radio>也會響應(yīng)一次handleCommand()方法。

所以，應(yīng)該去掉<el-radio>標(biāo)簽與<el-radio-group>標(biāo)簽。

<template slot="header" slot-scope="scope">
? <el-dropdown trigger="click" @command = "handleCommand">
? ? <span>類型</span>
? ? <el-dropdown-menu slot="dropdown">
? ? ? <el-dropdown-item command="屬性0">屬性0</el-dropdown-item>
? ? ? <el-dropdown-item command="屬性1">屬性1</el-dropdown-item>
? ? ? <el-dropdown-item command="屬性2">屬性2</el-dropdown-item>
? ? ? <el-dropdown-item command="屬性3">屬性3</el-dropdown-item>
? ? ? <el-dropdown-item command="屬性4">屬性4</el-dropdown-item>
? ? ? <el-dropdown-item command="屬性5">屬性5</el-dropdown-item>
? ? ? <el-dropdown-item command="屬性6">屬性6</el-dropdown-item>
? ? </el-dropdown-menu>
? </el-dropdown>
</template>
<template slot-scope="scope">（表中元素）</template>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: