当前位置: 代码迷 >> 综合 >> IVIEW table单击选中赋值给自定义下拉选框
  详细解决方案

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

热度:92   发布时间:2023-12-04 10:57:11.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>

在这里插入图片描述
在这里插入图片描述

  相关解决方案