ant design vue 表格里select下拉框选过的项设置禁用(不能重复)

获取数据。每次下拉框获取焦点时,通过循环给获取数据的每一项都加disabled属性并设置为false,判断获取的数据中是否包含自己选过的数据,若包含则在获取的数据中把该条数据disabled设置为true。

      <a-table
        :columns="columns"
        :data-source="syList"
        :pagination="false"
      >
        <template slot="syCode" slot-scope="text, record, index">
          <a-select
            style="width: 140px"
            v-model="syList[index].syCode"
            placeholder="请选择"
            @focus="handleFocus"
          >
            <a-select-option
              :value="item.dataCode"
              v-for="(item, i) in data"
              :key="i"
              :disabled="item.disabled"
            >
              {
   
   { item.dataLable }}
            </a-select-option>
          </a-select>
         </template>
       </a-table>
	data(){
    
    
		syList:[],//自己选过的数据
		data:[],//获取的数据(下拉框中的数据)
		columns:[
			{
    
    
          		title: "syCode",
          		align: "center",
          		key: 'syCode',
          		scopedSlots: {
    
     customRender: "syCode" },
        	},		
		]
	}
//获取数据
  created () {
    
    
    getData().then(res => {
    
    
      this.data = res.data
    })
  },
  methods:{
    
    
    handleFocus () {
    
    
      if (this.data) {
    
    
        this.data.forEach((item) => {
    
    
          item.disabled = false//每次下拉都需要重置禁用属性
        })
      }
      if (this.syList) {
    
    
        this.data.forEach((item) => {
    
    
          this.syList.forEach((myitem) => {
    
    
            if (item.dataCode === myitem.syCode) {
    
    
              item.disabled = true
            }
          })
        })
        this.$forceUpdate(); //一定要刷新组件!!!!!!!!!!!!
      }
    },
  }

猜你喜欢

转载自blog.csdn.net/q249859693/article/details/126597960
今日推荐