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 = truethis.tableisDisabled = falseconsole.log(this.tableisDisabled,this.tableisDisabled2)}else{this.tableData[id].ziduanvalue = " "//this.tableData[id].isDisabled = false//console.log(this.tableData[id].isDisabled)this.tableisDisabled = truethis.tableisDisabled2 = falseconsole.log(this.tableisDisabled,this.tableisDisabled2)}}//methods结束}}
</script>