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>