IVIEW table单击选中赋值给自定义下拉选框

小鱼儿 2023-10-05 20:27 34阅读 0赞

对于自定义的带有远程搜索的下拉选框切换table行的时候无法赋值问题

<template>
      <div style="background-color: #ffffff !important;">
        <Table :height="mheight" ref="selection" highlight-row size="default" :data="tableData"
               :columns="Columns"
               @on-row-click="mxEdit"  @on-current-change="currentRow"></Table>
        <div style="padding-top: 16px; padding-left:20px">
          <Form ref="form" :label-width="60" inline @submit.native.prevent>
            <div style="width: calc( 100% - 70px); float: left">
              <FormItem label="名称:" style="width: 19%;">
                <Select v-model="dm" ref="select" filterable remote :remote-method="remote" clearable
                        :loading="load" placeholder="名称" style="max-width: 150px; margin-left: 10px">
                  <Option v-for="item in list" :value="item.dm" :label="item.mc" :key="item.dm" style="min-width: 300px !important;">
                    <div style="width:80px; display: list-item; float: left;">{
        {
         item.dm }}</div>
                    <div style="width:80px; display: list-item; float: left;">{
        {
         item.mc }}</div>
                    <div style="clear:both;"></div>
                  </Option>
                </Select>
              </FormItem>
            </div>
          </Form>
        </div>
      </div>
    </template>
    
    <script>
      import config from '@/config'
      import axios from 'axios'
      const {
         local } = config;
      export default {
        
        data(){
        
          return {
        
            load:false,
            list:[{
        dm:'1',mc:'1号'},
              {
        dm:'2',mc:'2号'},
              {
        dm:'3',mc:'3号'}],
            crow:null,
            dm:'',
            mheight:0,
            ck_list: null,
            screenHeight: document.body.clientHeight,
            tableData:[
              {
        dm:'1',mc:'1号'},
              {
        dm:'2',mc:'2号'},
              {
        dm:'3',mc:'3号'},
            ]
          }
        },
        computed: {
        
          Columns () {
        
            let columns;
            return columns = [
              {
         title: '代码', key: 'dm', align: 'center' },
              {
         title: '名称', key: 'mc', align: 'center' }
            ]
          }
        },
        created(){
        
            this.mheight =  this.screenHeight - 380;
        },
        watch:{
         //监听screenHeight属性值的变化
          screenHeight(val){
        
              this.mheight =  this.screenHeight - 380;
          }
        },
        mounted () {
        
          window.onresize = () => {
        
            return (() => {
        
              this.screenHeight = document.body.clientHeight;
            })()
          }
        },
        methods:{
        
    
    
          mxEdit(row,index){
        
            this.$refs.select.setQuery(null);
            let params={
        q:this.dm};
            axios.post(local+'cs/list',
              params,{
        
                headers:{
        
                  'Authorization': sessionStorage.getItem('token')
                }
              }).then(res => {
        
              if(res.data.code == 0) {
        
                this.list = res.data.data;
                for (let i = 0; i < this.list.length; i++) {
        
                  if (this.list[i].dm == row.dm) {
        
                    this.ck_list = this.list[i];
    
                  }
                }
                this.dm = row.dm;
              }
            }).catch(err => {
        
            });
    
          },
          remote(value){
        
            if (value !== '') {
        
              let params={
        q:this.q}
              axios.post(local+'cs/list',
                params,{
        
                  headers:{
        
                    'Authorization': sessionStorage.getItem('token')
                  }
                }).then(res => {
        
                  let data=[];
                  console.log(res)
                    this.list.forEach(function (row,index) {
        
                      if (row.dm.indexOf(value)!=-1||row.mc.indexOf(value)!=-1) {
        
                        data.push(row);
                      }
                    });
                    this.load = true;
                    this.list = data;
              }).catch(err => {
        
              });
    
            }
          },
          currentRow(row){
        
            this.crow = row;
          }
        }
      }
    </script>
    
    <style scoped>
      .ivu-form-item{
        
        margin: 0px !important;
        margin-bottom:10px !important;
    
      }
    </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDMwNDY1_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDMwNDY1_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDMwNDY1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210225154337329.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDMwNDY1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDMwNDY1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210225154418918.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDMwNDY1,size_16,color_FFFFFF,t_70