当前位置: 首页 > article >正文

element ui table 每行不同状态

 table 每行定义值


 tableData: [ {  name: '',type:'',location:'', ziduan:'',createtype:'',ziduanvalue:'',checkAll:true,checkedCities: ['空', 'null', 'str随机', 'int随机'],isIndeterminate: 'true',table_id:'single',downloaddisabled:'true',deldisabled:'true'}
                    ],

 table column 

 v-model="scope.row.checkedCities

 本来一个入参改成两个入参,需要传入index

@change="(val) => handleCheckAllChange(val,scope.$index)"

 设置table某行值

 this.tableData[id].ziduanvalue = " "

 列某时只显示一个,v-show table内不起作用,用v-if 可以

v-if="tableisDisabled"

<template>
    <div>
       <el-container style="height:100%;">
           <el-container>
              <el-main >
                <br>
               <div style="width:40%">
                  
                   <template>
                        <el-table :data="tableData" border style="width: 100%">
                       
                          <el-table-column prop="ziduanvalue" label="字段值" width="300" v-if="tableisDisabled">
                              <template slot="header" slot-scope="scope" >
                                  <el-tooltip class="item" effect="dark" placement="top">
                                  <div slot="content">多个字段值用英文;隔开,字段多个数值用英文逗号,隔开</div>
                                  <span>字段值<i class="el-icon-info"></i></span>
                                  </el-tooltip>
                             </template>
                               <template slot-scope="scope" >
                                     <el-input v-model="scope.row.ziduanvalue" placeholder="请输入内容"></el-input>
                               </template>

                             </el-table-column>
                          <el-table-column prop="ziduanvalue" label="字段值" width="300"  v-if="tableisDisabled2">
                              <template slot="header" slot-scope="scope" >
                                  <el-tooltip class="item" effect="dark" placement="top">
                                  <div slot="content">多个字段值用英文;隔开,字段多个数值用英文逗号,隔开</div>
                                  <span>字段值<i class="el-icon-info"></i></span>
                                  </el-tooltip>
                             </template>

                                <template slot-scope="scope" >
                                  <el-checkbox :indeterminate="isIndeterminate" v-model="scope.row.checkAll" @change="(val) => handleCheckAllChange(val,scope.$index)">全选</el-checkbox>
                                  <div style="margin: 15px 0;"></div>
                                  <el-checkbox-group v-model="scope.row.checkedCities" @change="(value) => handleCheckedCitiesChange(value,scope.$index)">
                                    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                                  </el-checkbox-group>
                                </template>

                             </el-table-column>
                            
                                              </el-table>
                                                  
                                            </template>


               </el-main>
           </el-container>
       </el-container>
    </div>
</template>

<script>
    const cityOptions = ['空', 'null', 'str随机', 'int随机'];
    import axios from 'axios'
    const instance = axios.create({
       timeout: 1000*60*10 // 设置超时时间为10分钟
    });
    export default{
        name:"CreatJmx",
            data() {
               return {
                    //dialogcreateVisible:false,
                    //isDisabled:false,
                    downloaddisabled:true,
                    deldisabled:true,
                    tableData: [
                          {  name: '',type:'',location:'', ziduan:'',createtype:'',ziduanvalue:'',checkAll:true,checkedCities: ['空', 'null', 'str随机', 'int随机'],isIndeterminate: 'true',table_id:'single',downloaddisabled:'true',deldisabled:'true'}
                    ],
                     

                    form: {
                            filename:'',
                    },
                    fileList: [] ,// 绑定的文件列表
                    tableidall:'all',
                    //checkAll: true,
                   // checkedCities: ['空', 'null', 'str随机', 'int随机'],
                    cities: cityOptions,
                   // isIndeterminate: true,
                    tableisDisabled:true,
                    tableisDisabled2:false

                }
            },
            components:{

            },
            mounted:function(){

            // mounted关闭
            },
             methods: {
              handleCheckAllChange(val,id) {
                console.log(val,id)
                this.tableData[id].checkedCities = val ? cityOptions : [];
                this.tableData[id].isIndeterminate = false;
                this.tableData[id].ziduanvalue = this.tableData[id].checkedCities.join(',')
                console.log(this.tableData[id].checkedCities.join(','))
              },
              handleCheckedCitiesChange(value,id) {
                console.log(value,id)
                let checkedCount = value.length;
                this.tableData[id].checkAll = checkedCount === this.cities.length;
                this.tableData[id].isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
                this.tableData[id].ziduanvalue = this.tableData[id].checkedCities.join(',')
                console.log(this.tableData[id].checkedCities.join(','))

              },
                   
                 selectchange(value,id) {
                    console.log('生成类型',value)
                    if(value === "yichang"){
                        console.log('异常')
                        console.log(this.tableData[id].checkedCities.join(','))
                        this.tableData[id].ziduanvalue = this.tableData[id].checkedCities.join(',')
                        //this.tableData[id].isDisabled = true
                        //console.log(this.tableData[id].isDisabled)
                        this.tableisDisabled2 = true
                        this.tableisDisabled = false
                        console.log(this.tableisDisabled,this.tableisDisabled2)
                    }
                    else{
                        this.tableData[id].ziduanvalue = " "
                        //this.tableData[id].isDisabled = false
                        //console.log(this.tableData[id].isDisabled)
                        this.tableisDisabled = true
                        this.tableisDisabled2 = false
                        console.log(this.tableisDisabled,this.tableisDisabled2)
                    }

                 }
             //methods结束
             }
    }
</script>


http://www.kler.cn/a/404319.html

相关文章:

  • sed使用扩展正则表达式时, -i 要写在 -r 或 -E 的后面
  • elasticsearch介绍和部署
  • Bug:引入Feign后触发了2次、4次ContextRefreshedEvent
  • 【生成数据集EXCEL文件】使用生成对抗网络GAN生成数据集:输出生成数据集EXCEL
  • Leetcode 完全二叉树的节点个数
  • RPC安全可靠的异常重试
  • 攻防世界 Web新手练习区
  • scPair:隐式特征选择提高single-cell paired多模态分析
  • pdf文档动态插入文字水印,45度角,旋转倾斜,位于文档中央,多行水印可插入中文
  • zookeeper is not a recognized option--解决方案
  • 浅谈Python之Matplotlib库
  • 设计模式之 享元模式
  • 什么命令可以查看数据库中表的结构
  • 2024年11月21日Github流行趋势
  • 【操作系统】Linux之网络编程(TCP)(头歌作业)
  • PostGres命令【常用维护,增删改查】
  • 华为服务器(iBMC)硬件监控指标解读
  • STM32--JLINK使用、下载问题记录
  • 如何开始学习嵌入式?嵌入式未来怎么样?如何应对职业危机?
  • LinuxC高级
  • 零差云控 ZeroErr eRob 电机 CAN、CANopen、EtherCAT、ROS2 机器人开发详细教程
  • 网络安全之接入控制
  • 机器人运动控制与编程:从轮式机器人到步行机器人的全景探索
  • 更改ArduSub水平位置控制器为ADRC
  • 数字排列.
  • MAC借助终端上传jar包到云服务器