需求1：
一个禁止编辑的输入框 和一个按钮 点击按钮弹出列表 选入数据 然后将数据传到输入框展示 并同步更新事项的下拉框的数据列表
实现例图
点击选择弹出抽屉 例图
将科目名称传回禁用输入框
思路：
1 输入框作为父组件，抽屉作为子组件
2 点击选择 打开抽屉子组件 要判断点击的是哪个选择 可以根据表格的row.scope.id进行判断
3 子传父的时候 ，去更新输入框
父组件代码
// 视图层代码 以 清欠科目为例
<el-table-column
show-overflow-tooltip
label="清欠科目"
prop="jyOffSubjectName"
width="200"
>
<template slot-scope="scope">
<el-input
v-model="scope.row.jyOffSubjectName"
@select="check"
:disabled="true"
>
<template slot="append">
<el-button
@click="
check(
false,
scope.row.jyOffSubjectName,
scope.row.id,
'jyOffSubjectName'
)
"
>选择</el-button
>
</template>
</el-input>
</template>
</el-table-column>
<el-table-column
show-overflow-tooltip
label="清欠事项"
prop="jyOffSubjectDetailName"
width="200"
>
<template slot-scope="scope">
<el-select
style="width: 100%"
size="small"
placeholder="请选择"
v-model="scope.row.jyOffSubjectDetailName"
>
<el-option
v-for="item in firstItem[scope.row.id]"
:key="item.costCodeName"
:label="item.costCodeName"
:value="item.costCodeName"
></el-option>
</el-select>
</template>
</el-table-column>
<subject
ref="edit"
@updata="getData"
:dataList="dataList"
:mark="mark"
:selectedForm="selectedForm"
:selectedId="selectedId"
@clear="handleDrawerClose"
></subject>
// data()
dataList: {}, // 给子组件传递的数据
feeItem: [], // 收费项
feeList: [], // 收费属性列表
firstItem: {}, // 清欠事项列表
secondItem: {}, // 核算事项列表
thirdItem: {},// 预算事项列表
tableData: [], // 表格数据
//methods（）
getData(sonData, selectedId, selectedForm) {
const [name, id, code] = sonData;
this.tableData.map((i) => {
if (i.id === this.selectedId) {
i[selectedForm] = name;
}
return i;
});
this.parentCostCodeId = id;
switch (selectedForm) {
case "jyOffSubjectName":
this.parentSub(id, selectedId);
break;
case "jySubjectName":
this.parentSub1(id, selectedId);
break;
case "jyPreSubjectName":
this.parentSub2(id, selectedId);
break;
}
},
async parentSub(parentCostCodeId, selectedId) {
// 清欠事项下拉框事件
const res = await api.getGameList({ vo: { parentCostCodeId } });
if (res.code == 0) {
this.firstItem = Object.assign({}, this.firstItem, {
[selectedId]: res.data.rows,
});
}
},
async parentSub1(parentCostCodeId, selectedId) {
// 核算事项下拉框事件
const res = await api.getGameList({ vo: { parentCostCodeId } });
if (res.code == 0) {
this.secondItem = Object.assign({}, this.secondItem, {
[selectedId]: res.data.rows,
});
}
},
async parentSub2(e) {
// 预算事项下拉框事件
console.log(e, "事项下拉框");
const res = await api.getGameList({ vo: { parentCostCodeId } });
if (res.code == 0) {
this.thirdItem = Object.assign({}, this.thirdItem, {
[selectedId]: res.data.rows,
});
}
},
子组件 点击保存的时候传数据
//视图层
<div class="btnGroup">
<el-button @click="cancelEvent">取消</el-button>
<el-button type="primary" @click="confirmEvent">确定</el-button>
</div>
// props 接收 父组件的数据
props: ['dataList', 'mark', 'selectedId', 'selectedForm'],
// methods
confirmEvent() {
console.log('queren，这里要吧数据传给父组件', this.selectedId)
this.$emit('updata', this.sonData, this.selectedId, this.selectedForm)
this.$emit('clear')
},
需求2
二级联动 两个下拉框 进行数据联动 例图
点击收费项属性获取一个列表，然后点击相应数据 获取一个父类ID,根据父类ID ，后端再传给我一个新的收费项的列表，每次点击属性都需要更新项。
代码实现
<el-row>
<el-col :span="11">
<el-form-item label="收费项属性">
<el-select
style="width: 100%"
size="small"
placeholder="请选择收费项属性"
v-model="feeValue"
@change="getItem"
>
<el-option
v-for="item in feeList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="收费项">
<el-select
style="width: 100%"
size="small"
placeholder="请选择收费项"
v-model="feeId"
@change="getfeeid"
>
<el-option
v-for="item in feeItem"
:key="item.id"
:label="item.feeItemName"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
props: {
parentData: {
type: Array,
default: "",
},
},
computed: {},
watch: {
parentData(val) {
if (val) { // 父组件传的数据进行更新
val.forEach((item) => {
this.feeList.push({
value: item.dicValue,
label: item.dicText,
});
});
}
},
},
// methods 方法
async getItem() {
// 获取收费项目
this.feeItem = [];
this.feeId = "";
const res = await api.getFeeItem(this.feeValue);
if (res.code == 0) {
this.feeItem = [...res.data];
}
},
async getfeeid() {
// 获取收费项的id 查税率
let params = this.feeId;
console.log(params, "parmmmmmmmm");
const res = await api.getTaxRate(params);
if (res.data.length > 0) {
console.log("111111", res.data);
// this.tableDate
this.tableData = res.data;
} else {
console.log("暂无数据");
}
},
注意 每次点击属性都要清空一下右边项
