vxe-table 监听某一列的值

小虾米❀

已于 2024-06-14 16:09:14 修改

阅读量560

点赞数 1

分类专栏： Vue 前端文章标签：前端 vxe-table

于 2024-06-14 16:08:08 首次发布

本文链接：https://blog.csdn.net/weixin_44084713/article/details/139683124

版权

前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

Vue

2 篇文章 0 订阅

订阅专栏

需求：根据A列的内容，B列显示下拉框，文本，数值类型的数据
总思路：设置元素点击(cell-click)、双击事件(cell-dblclick)，拿到当前行的数据，监听当前行的A列，如果变化，B列做相应处理。文本和数值通过input中的type设置。
min=“0”，表示数值最小为0

<vxe-table
    ref="specialHandTable"
    border
    :scroll-y="{ enabled: false }"
    height="320"
    align="center"
    size="mini"
    :column-config="{ resizable: true }"
    :data="tableData"
    :edit-config="{ trigger: 'click', mode: 'cell' }"
    :row-config="{ isCurrent: true, isHover: true }"
    @cell-click="cellClickEvent"
    @cell-dblclick="cellClickEvent"
  >
    <vxe-column type="seq" width="10%"></vxe-column>    
    <vxe-column field="AColumn" title="A列数据" width="25%" :edit-render="{ enabled:IsEdit }">
      <template #edit="{ row }">
         <vxe-select v-model="row.AColumn"  clearable filterable transfer  @change="change(row)">
          <vxe-option v-for="item in AColumnList" :key="item" :label="item" :value="item" ></vxe-option>
        </vxe-select>
      </template>
    </vxe-column>
     
  <vxe-column field="BColumn" title="B列值" width="35%" :edit-render="{ enabled:IsEdit}">
       <template #default="{ row }">
      <span>{{ formatBColumnOptions(row) }}</span>
    </template>
      <template #edit="{ row }">
        <vxe-input v-if="!IsSelect" v-model="row.BColumn" :type="inputType" min="0"></vxe-input>
         <vxe-select v-else v-model="row.BColumn"  clearable filterable transfer multiple>
          <vxe-option v-for="item in BColumnList" :key="item.SubItemCode" :label="item.SubItemName" :value="item.SubItemCode" ></vxe-option>
        </vxe-select>
      </template>
    </vxe-column>     
  </vxe-table>


data()
{
return{
AColumnList:[],//A列下拉框数据
BColumnList:[],//B列下拉框数据
inputType:'text',
tableData:[],//table数据
selectedRow:null,//选中的值
IsSelect:false,//BColumn是否显示下拉框
}
}

methods:{
 cellClickEvent({ row, rowIndex })
   {
      this.selectedRow = row;
      this.selectedRow.RowIndex = rowIndex;
   },
  //改变A列的值，清空对应B列的值
    change(row)
    {
      if(row.AColumn =="下拉框")
      {
        this.$set(this.selectedRow,'BColumn',[]);  
      }else
      {
        this.$set(this.selectedRow,'BColumn',"");  
      }
    },
  async AColumnChange(name){
      this.IsSelect = false;
      this.BColumnList=[];
      this.inputType ="text";
      switch(name)
      {
        case "下拉框"://下拉框
       this.IsSelect = true;
       await  GetBColumnList().then((res) => {
        this.BColumnList = res.Data.Data.map((item)=>{
          return {
            SubItemName: item.名称,
            SubItemCode: item编码.
          }
        })
      });
        break;
        case "数值":
          this.inputType ="number";
          break;
        default:
          break;
      }
    },
	 //转换BColumn下拉框的值
    formatBColumnOptions(row){
      if(row.AColumn == "下拉框")
      {
        let options = this.BColumnList;
        const item = options.filter((item) => row.BColumn.includes(item.SubItemCode))
        let value = "";
        if(item.length>0)
        {
          value = item.map((t) => {
            return  t.SubItemName;
          }).join(",");
        }
        return value;        
      }else
      {
        return row.BColumn;
      }       
    },
},
  watch: {
    'selectedRow.AColumn':{
      deep:true,
      handler(val){
        if(val!=undefined)
        {
          this.AColumnChange(val);
        }else
        {
           this.IsSelect = false;
        }      
      }
    }
  },