介绍 & lt;模板)=癲ataType"标签;比;
& lt; !——关键不能使用指数——比;
& lt;一个标签:关键=皌ag.id"可闭:afterClose=?)=比;deleteDataType (tag.id)“在{{tag.title}} & lt;/a-tag>
& lt;/template>
& lt;一个表
:rowSelection=皉owSelection ()“;
:列=癱olumns"
:数据源=癴ilterTypeData"
:分页=皃aginationProps":滚动=& # 39;{y: 455} & # 39;比;
& lt;模板槽=癲ataName"slot-scope=癲ataName"比;
& lt; div)=癲ataName"(列表,指数);:关键=& # 39;指数# 39;在{{list.name}} & lt;/div>
& lt;/template>
& lt;模板槽=癲escription"slot-scope=癲escription"比;
& lt; div)=癲escription"(列表,指数);:关键=& # 39;指数# 39;在{{list.content}} & lt;/div>
& lt;/template>
& lt;/a-table> 数据:{
返回{
const列=[
{
标题:& # 39;数据类型& # 39;,
dataIndex: & # 39; dataTypeName& # 39;
宽度:& # 39;15% & # 39;
},
{
标题:& # 39;数据名称& # 39;,
dataIndex: & # 39; dataName& # 39;
宽度:& # 39;15% & # 39;
scopedSlots: {customRender: & # 39; dataName& # 39;}
},
{
标题:& # 39;数据描述& # 39;,
dataIndex: & # 39;描述# 39;
scopedSlots: {customRender: & # 39;描述# 39;}
}
),
rowKeys: [],
数据类型:[],
changeDataType: [],
addDataType: [],
rowKeys: [],
showTip:假//是否禁止选择(如果最多选择8条)
}
} rowSelection () {//const selectedRowKeys=this.selectedRowKeys
const自我=这
返回{
columnTitle: & # 39;选择& # 39;,//去掉头部全选框
hideDefaultSelections:没错,//选择:{关键:1},
selectedRowKeys:自我。rowKeys,//选中值的关键> deleteDataType (removedTag) {//侧边数据删除
const {rowKeys}=const newArr=[]
这一点。rowKeys=[]//标签标签近事件是diaplay:没有到圆顶元素上,所有需要用到afterClose关键不能使用指数,否则删除事件有问题=this.dataType const标签。过滤器(标签=比;标签。id !==removedTag)
这一点。数据类型=标签
rowKeys。forEach(列表=比;{
如果(列表!==removedTag) {
newArr.push(列表)
}
}）
这一点。rowKeys=[…newArr]
},
addDataType () {//勾选列表数据
这一点。数据类型=[]
这一点。rowKeys=[]
console.log (this.changeDataType)
this.changeDataType。forEach(列表=比;{
如果列表。templateItemId,,list.selectItem) {//初始化的时候
this.dataType。推动({标题:列表。dataTypeName, id:列表。templateItemId})
this.rowKeys.push (list.templateItemId)
}
如果(list.key) {//点击多选的时候
this.dataType。推动({标题:列表。dataTypeName, id:列表。关键})
this.rowKeys.push (list.key)
}
}）
}, & lt;一种形式:形式=癴orm"@submit=癶andleCreateMenuSubmit"比;
& lt;水青庭占位符=扒胙≡窦际趿煊?@change=癶andleNoteCategoryChange"比;
& lt; a-select-option v=皀ote_category"项目;:关键=癷tem.id"比;
{{item.name}}
& lt;/a-select-option>
& lt;/a-select>
& lt;水青庭占位符=扒胙≡穹掷唷?ref=皀ote_category2"@change=癶andleNoteCategoryChange2"比;
& lt; a-select-option v=皀ote_category2"项目;:关键=癷tem.id"比;
{{item.name}}
& lt;/a-select-option>
& lt;/a-select>
& lt; a-form-item标签=凹蚪椤氨?
& lt; a-textarea
占位符=?如:产品设计与研发“
v-decorator=癧& # 39;描述# 39;]“;
:auto-size=皗minRows: 2、maxRows: 4}“;/比;
& lt;/a-form-item>
& lt;/a-form>
handleNoteCategoryChange(价值,选项){
Axios.post (this.userData。noteUrl + & # 39; get_note_category_by_pid& # 39;, {
pid:价值
}）
不要犹豫((res)=比;{
如果(res.data。代码==1){
这一点。note_category2=res.data.data;
如果(res.data}其他。代码==0){
这一点。note_category2=[];//获取成功,但是数据为空
这一点。note_category2Id=1,
其他}{
美元。message.error (res.data.msg);
}
}）
.catch(()=比;美元。message.error(& # 39;请检查网络后重试& # 39;));
},
handleNoteCategoryChange2(价值,选项){
这一点。note_category2Id=价值;
},//- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
数据(){
返回{
note_category: [],
note_category2: [],
note_category2Id: 1、
}
}
今天就跟大家聊聊有关Ant vue中设计实现联动选择取消,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
html中
js代码
在表中如果想要某个单元格里面是呈现两行或者两行以上,那么就添加模板让槽=命名,将数据循环遍历就可以呈现了
页面为
<强> ant-design-vue的选择二级联动,联动文本不更新的解决办法
<强>前言
有了需要改动祖传代码项目需求:把之前的选择改成二级联动。项目使用了ant-design-vue,数据为[{“id": 1、“name":“前端开发“}]
<强>问题描述
