如何将下拉框嵌入列表,如下:
实现代码:
<el-table
border
:data="linkData">
<el-table-column
label="终端"
>
<template slot-scope="scope">
<el-select v-if="scope.row.addSign" v-model="dataForm.terminal" @change="getLinkDataForAdd(null)" :rule="dataRule">
<el-option
v-for="item in terminalOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
label="功能分类"
>
<template slot-scope="scope">
<el-select v-if="scope.row.addSign" v-model="dataForm.funClassifyId" @change="getLinkDataForAdd(null)" filterable>
<el-option
v-for="item in funClassifyOptions"
:key="item.id"
:label="item.funName"
:value="item.id">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
label="标题"
>
<template slot-scope="scope">
<el-select v-if="scope.row.addSign" v-model="dataForm.funIntroId" filterable clearable>
<el-option
v-for="item in linkForAddOptions"
:key="item.id"
:label="item.title"
:value="item.id">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
label="操作"
>
<template slot-scope="scope">
<el-button type="text" size="small" v-if="scope.row.addSign" @click="resetData()">删除</el-button>
</template>
</el-table-column>
</el-table>
// 查询可供添加的链接
getLinkDataForAdd(funIntroId) {
var terminal = this.dataForm.terminal
var funClassify = this.dataForm.funClassifyId
if (!terminal || !funClassify) {
return
}
this.$http({
url: this.$http.adornUrl('/storefunintro/listByTerminalAndClassify'),
method: 'get',
params: this.$http.adornParams({
'terminal': terminal,
'funClassify': funClassify
})
}).then(({data}) => {
debugger
if (funIntroId) {
this.dataForm.funIntroId = funIntroId
} else {
this.dataForm.funIntroId = null
}
if (data && data.code === 0) {
console.log('data.links:-------'+data.links)
this.linkForAddOptions = data.links
} else {
this.linkForAddOptions = []
}
}).catch(() => {
})
},
// 删除关联
removeLink (id) {
var delteIndex = -1;
for (var index = 0; index < this.linkData.length; inde++) {
if (this.linkData[index]['id'] == id) {
delteIndex = index
break
}
}
this.linkData.splice(delteIndex, 1)
},
// 重置数据
resetData() {
this.dataForm.terminal = 1
this.dataForm.funClassifyId = ''
this.dataForm.funIntroId = ''
this.dataForm.title = ''
this.linkData = [{'addSign': true}]
this.linkForAddOptions = []
}
// 查询分类
getClassifyData() {
this.$http({
url: this.$http.adornUrl('/storefunclassify/list'),
method: 'get',
params: this.$http.adornParams({
'page': 1,
'limit': 1000
})
}).then(({data}) => {
if (data && data.code === 0) {
this.funClassifyOptions = data.page.list
} else {
this.funClassifyOptions = []
}
}).catch(() => {
})
},
getLabelByValue(options, value, valueName, labelName) {
if (!options) {
return value
}
if (!valueName) {
valueName = 'value'
}
if (!labelName) {
labelName = 'label'
}
for (var index = 0; index < options.length; index++) {
if (options[index][valueName] == value) {
return options[index][labelName]
}
}
return ''
},
mounted () {
this.getClassifyData()
}
总结:
vue,了解了双向绑定,基本简单的操作差不多了,但是一些细节的问题,还需要学习更多才能满足所需。