2023.1.14我学习了如何使用element里面的el-select+el-checkbox多选框来进行一个下拉框的二级联动,并且可以实现禁用对应的el-option数据,然后就是下拉框选中对应数据可以实现表头高亮效果。
效果如:
全选下拉框:
二级联动:
单独禁用效果:
选中选项表头高亮:
一、实现多选框+下拉框
html代码如下:
<el-form-item label="外挂字典" prop="version" width="500px">
//multiple设置多选
//collapse-tags实现多个标签折叠
//selectValues为[]
<el-select
v-model="selectValues" multiple @change="select_collection(selectValues)" collapse-tags
>
//isSelectAll默认为false
<!--设置全选的效果-->
<el-checkbox v-model="isSelectAll" style="padding-left: 18px" @change="selectAll_collection">全选
</el-checkbox>
//already_select_collection为[]
//:value可以传多个参数
<el-option
style="text-align: center"
v-for="item in already_select_collection"
:key="item.id"
:label="item.name"
:value="{
value:item.col_remark_name,
tb_code:item.tb_code,
version:item.version,
name:item.name,
}"
>
</el-option>
</el-select>
</el-form-item>
//selectMapping为[]
<el-form-item label="外挂字段" prop="version" width="500px">
<el-select
v-model="selectMapping" @change="select_mapping(selectMapping)" collapse-tags multiple
>
<!--设置全选的效果-->
<el-checkbox v-model="isSelectAll_mapping" style="padding-left: 18px" @change="selectAll_mapping">全选
</el-checkbox>
//:disabled="item.disabled"设置禁用(后面讲禁用的时候再使用,这边不用在data设置false)
//already_select_mapping为[]
<el-option
:disabled="item.disabled"
style="text-align: center"
v-for="item in already_select_mapping"
:key="item.id"
:label="item.remark_name"
:value="item.remark_name"
></el-option>
</el-select>
</el-form-item>
js代码如下:
表名的全选按钮:
// 实现外挂字典下拉框全选按钮的方法
selectAll_collection(val) {
// this.selectValues = [] el-select绑定数组
this.selectValues = []
//如果正确
if (this.isSelectAll) {
//遍历el-option的数组(数据从后端取得)
this.already_select_collection.map((item) => {
this.selectValues.push(item.col_remark_name)
})
this.$message({
message: '已全选',
type: 'success'
})
} else {
this.selectValues = []
this.$message.error('已取消全选')
}
},
el-select的@change事件:
// 实现外挂字典下拉框的方法
select_collection(val) {
//如果长度相等是全选
if (val.length === this.already_select_collection.length) {
this.isSelectAll = true
} else {
this.isSelectAll = false
}
(主要是上面这部分)
// 拿到外挂字典下拉框的对应数据实现高亮效果
this.select_data = val
let tb_code = ''
let version = ''
let name = ''
// 拿到对应的version、tb_code、name
for (let i = 0; i < this.select_data.length; i++) {
tb_code = (this.select_data[i].tb_code)
version = (this.select_data[i].version)
name = (this.select_data[i].name)
}
this.queryParams.version = version
this.queryParams.name = name
if (val.length != 0) {
// 连接外挂字段的接口
listData(this.queryParams, tb_code).then(res => {
this.already_select_mapping = res.data.columns
// 设置列表的禁用
this.already_select_mapping.forEach(v => {
v.disabled = false
})
for (let i = 0; i < this.already_select_mapping.length; i++) {
if (this.already_select_mapping[i].remark_name == '外挂字典映射字段') {
this.already_select_mapping[0].remark_name = '主键'
this.already_select_mapping[0].disabled = true
}
}
})
}
},
效果:
二、实现第一个下拉框和第二个下拉框的二级联动
html代码还是(一、实现多选框+下拉框)这部分
js代码如下:
// 实现外挂字典下拉框的方法
select_collection(val) {
if (val.length === this.already_select_collection.length) {
this.isSelectAll = true
} else {
this.isSelectAll = false
}
// 拿到外挂字典下拉框的对应数据实现高亮效果
this.select_data = val
(主要是下面这部分)
let tb_code = ''
let version = ''
let name = ''
// 拿到对应的version、tb_code、name
for (let i = 0; i < this.select_data.length; i++) {
tb_code = (this.select_data[i].tb_code)
version = (this.select_data[i].version)
name = (this.select_data[i].name)
}
this.queryParams.version = version
this.queryParams.name = name
if (val.length != 0) {
// 连接外挂字段的接口
listData(this.queryParams, tb_code).then(res => {
this.already_select_mapping = res.data.columns
// 设置列表的禁用
this.already_select_mapping.forEach(v => {
v.disabled = false
})
for (let i = 0; i < this.already_select_mapping.length; i++) {
if (this.already_select_mapping[i].remark_name == '外挂字典映射字段') {
this.already_select_mapping[0].remark_name = '主键'
this.already_select_mapping[0].disabled = true
}
}
})
}
},
效果如:
三、实现单独选项禁用效果
html代码如下:和一、二的一样,主要是 :disabled="item.disabled",注意不需要在data设置true/false
<!--设置全选的效果-->
<el-checkbox v-model="isSelectAll_mapping" style="padding-left: 18px" @change="selectAll_mapping">全选
</el-checkbox>
<el-option
:disabled="item.disabled"
style="text-align: center"
v-for="item in already_select_mapping"
:key="item.id"
:label="item.remark_name"
:value="item.remark_name"
></el-option>
</el-select>
js代码如下:
//这个是第一个下拉框的数组,然后forEach可以把需要的属性放进去
this.already_select_mapping.forEach(v => {
v.disabled = false
})
//for循环拿到对应的属性,改变它的值
for (let i = 0; i < this.already_select_mapping.length; i++) {
if (this.already_select_mapping[i].remark_name == '外挂字典映射字段') {
this.already_select_mapping[0].remark_name = '主键'
this.already_select_mapping[0].disabled = true
}
}
效果如:
四、实现下拉框选中选项对应的表头高亮
html代码如下:
//在el-table中加入
:header-cell-style="column_height_light"
js代码如下:
// 实现高亮的效果
column_height_light(row) {
// 多选但不全选
if (this.select_data.length != 0) {
for (let i = 0; i < this.select_data.length; i++) {
//row.column.label可以拿到全部表头的名字
if (row.column.label == this.select_data[i].value) {
return { background: '#f58798' }
}
}
} else {
// 全选
for (let j = 0; j < this.selectValues.length; j++) {
if (row.column.label == this.selectValues[j]) {
return { background: '#f58798' }
}
}
}
},
对应的下拉框@change事件js代码如下:
// 实现外挂字典下拉框的方法
select_collection(val) {
if (val.length === this.already_select_collection.length) {
this.isSelectAll = true
} else {
this.isSelectAll = false
}
// 拿到外挂字典下拉框的对应数据实现高亮效果
this.select_data = val
(主要是中间这段)
let tb_code = ''
let version = ''
let name = ''
// 拿到对应的version、tb_code、name
for (let i = 0; i < this.select_data.length; i++) {
tb_code = (this.select_data[i].tb_code)
version = (this.select_data[i].version)
name = (this.select_data[i].name)
}
this.queryParams.version = version
this.queryParams.name = name
if (val.length != 0) {
// 连接外挂字段的接口
listData(this.queryParams, tb_code).then(res => {
this.already_select_mapping = res.data.columns
// 设置列表的禁用
this.already_select_mapping.forEach(v => {
v.disabled = false
})
for (let i = 0; i < this.already_select_mapping.length; i++) {
if (this.already_select_mapping[i].remark_name == '外挂字典映射字段') {
this.already_select_mapping[0].remark_name = '主键'
this.already_select_mapping[0].disabled = true
}
}
})
}
},
效果如:
有不懂的地方欢迎来提问。