<template v-for="tag in dataType">
 <!-- key不能使用index -->
 <a-tag :key="tag.id" closable :afterClose="() => deleteDataType(tag.id)">{{tag.title}}</a-tag>
</template>
<a-table 
 :rowSelection="rowSelection()" 
 :columns="columns" 
 :dataSource="filterTypeData" 
 :pagination="paginationProps" :scroll='{y:455}' >
 <template slot="dataName" slot-scope="dataName">
  <div v-for="(list,index) in dataName" :key='index'>{{list.name}}</div>
 </template>
 <template slot="description" slot-scope="description">
  <div v-for="(list,index) in description" :key='index'>{{list.content}}</div>
  </template>
</a-table>

data:{
return{
 const columns = [
 {
  title: '数据类型',
  dataIndex: 'dataTypeName',
  width: '15%'
 },
 {
  title: '数据名称',
  dataIndex: 'dataName',
  width: '15%',
  scopedSlots: { customRender: 'dataName' }
 },
 {
  title: '数据描述',
  dataIndex: 'description',
  scopedSlots: { customRender: 'description' }
 }
 ],
 rowKeys:[],
 dataType:[],
 changeDataType:[],
 addDataType:[],
 rowKeys:[],
 showTip:false // 是否禁止选择（如果最多选择8条）
}
}

rowSelection() {
  // const selectedRowKeys = this.selectedRowKeys
  const self = this
  return {
  columnTitle: '选择', // 去掉头部全选框
  hideDefaultSelections: true,
  // selections: { key: 1 },
  selectedRowKeys: self.rowKeys, // 选中的key值
  onChange: (selectedRowKeys, selectedRows) => {
   // 勾选改变触发事件
   if (selectedRows.length <= 7) {
   self.changeDataType = selectedRows
   self.addDataType()
   this.showTip = false
   } else {
   // self.$message.error('数据最多选择8个')
   this.showTip = true
   }
  }
  }

deleteDataType(removedTag) {
  // 侧边数据删除
  const { rowKeys } = this
  const newArr = []
  this.rowKeys = []
  // tag标签close事件是diaplay:none到dome元素上，所有需要用到afterClose key不能使用index，否则删除事件有问题
  const tags = this.dataType.filter(tag => tag.id !== removedTag)
  this.dataType = tags
  rowKeys.forEach(list => {
  if (list !== removedTag) {
   newArr.push(list)
  }
  })
  this.rowKeys = [...newArr]
 },
addDataType() {
  // 勾选列表数据
  this.dataType = []
  this.rowKeys = []
  console.log(this.changeDataType)
  this.changeDataType.forEach(list => {
  if (list.templateItemId && list.selectItem) {
   // 初始化的时候
   this.dataType.push({ title: list.dataTypeName, id: list.templateItemId })
   this.rowKeys.push(list.templateItemId)
  }
  if (list.key) {
   // 点击多选的时候
   this.dataType.push({ title: list.dataTypeName, id: list.key })
   this.rowKeys.push(list.key)
  }
  })
 },

<a-form :form="form" @submit="handleCreateMenuSubmit">
 <a-select style="width:50%" placeholder="请选择技术领域" @change="handleNoteCategoryChange">
 <a-select-option v-for="item in note_category" :key="item.id">
{{ item.name }}
 </a-select-option>
 </a-select>
 <a-select style="width:50%" placeholder="请选择分类" ref="note_category2" @change="handleNoteCategoryChange2">
 <a-select-option v-for="item in note_category2" :key="item.id">
{{ item.name }}
 </a-select-option>
 </a-select>
 <a-form-item label="简介">
 <a-textarea
placeholder="如：产品设计与研发"
v-decorator="['description']"
:auto-size="{ minRows: 2, maxRows: 4 }"
 />
 </a-form-item>
</a-form> 


handleNoteCategoryChange(value, option) {
 Axios.post(this.userData.noteUrl + 'get_note_category_by_pid',{
 pid: value
 })
 .then((res) => {
 if (res.data.code == 1) {
 this.note_category2 = res.data.data;
 } else if(res.data.code == 0) {
 this.note_category2 = [];//获取成功，但是数据为空
   this.note_category2Id = -1,
 } else {
 this.$message.error(res.data.msg);
 }
 })
 .catch(() => this.$message.error('请检查网络后重试'));
},
handleNoteCategoryChange2(value, option) {
 this.note_category2Id = value;
},
 
//-------------------------------
data(){
 return {
  note_category: [],
  note_category2: [], 
  note_category2Id: -1,
 }
}

 handleNoteCategoryChange(value, option) {
 console.log(value);
 // 获取note_category笔记分类
 Axios.post(this.userData.noteUrl + 'get_note_category_by_pid',{
 pid: value
 })
 .then((res) => {
 if (res.data.code == 1) {
  this.note_category2 = res.data.data;
 } else if(res.data.code == 0) {
  this.note_category2 = [];
  this.note_category2Id = -1;
  if (this.$refs.note_category2.$el.children[0].children[0].children[1]) {
this.$refs.note_category2.$el.children[0].children[0].children[1].innerText = '请选择分类';
  }
 } else {
  this.$message.error(res.data.msg);
 }
 })
 .catch(() => this.$message.error('请检查网络后重试'));

 },