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>