//关键代码
//{{ scope.row['select' + index] }}
//vue v-model拼接
//v-model="radioSelect['radio'+index]"
//radioSelect:{
// radio0:'',
// radio1:'',
// radio2:''
//},
<el-table-column
v-for="(v, index) in tableHerds"
:key="`tableHerdsGd_${index}`"
align="center"
:label="v.name"
:min-width="`70px`"
>
<!-- 非空验证显示星号 -->
<!-- <template slot="header">
<span v-if="v.isRequired === '1'" class="asterisk">*</span>
<span>{{ v.columnName }}</span>
</template> -->
<template slot-scope="scope">
<div class="nameDiv" v-if="v.type === 'checkbox'">
<el-checkbox
v-model="scope.row['checkbox' + index]"
:disabled="true"
></el-checkbox>
</div>
<div v-else>
{{ scope.row['select' + index] }}
</div>
</template>
</el-table-column>
<el-table-column
prop="address"
label="操作"
align="center"
min-width="100"
>
<template slot-scope="scope">
<el-button
@click="handleClick(scope.row, '1')"
type="text"
size="small"
>人员详情</el-button
>
</template>
</el-table-column>
附加记录：解决el-table添加fiexd属性出现的表格错位问题
学习记录：
通过 doLayout 方法解决
1、数据更新后出现的错位问题
1.1 直接在数据赋值后执行doLayout方法
this.data = data;
// 在数据更新后执行
this.$nextTick(() => {
// myTable是表格的ref属性值
if (this.$refs.myTable && this.$refs.myTable.doLayout) {
this.$refs.myTable.doLayout();
}
})
1.1 直接在数据赋值后执行doLayout方法
this.data = data;
// 在数据更新后执行
this.$nextTick(() => {
// myTable是表格的ref属性值
if (this.$refs.myTable && this.$refs.myTable.doLayout) {
this.$refs.myTable.doLayout();
}
})