vue elementUI 动态渲染表格
程序员文章站
2022-06-07 22:34:42
...
<el-table :data="tableData2" border style="width: 100%" max-height="300">
<el-table-column prop="num" label="序号" align="left" width="50">
<template slot-scope="scope">
<div>{{scope.$index+1}}</div>
</template>
</el-table-column>
<template v-for="(item, index) in table2ColNames">
<el-table-column min-width="150" show-overflow-tooltip :key="index" :label="item">
<template slot-scope="scope">
<div class="cellItem" style="display: inline-block;">
<div style="display: inline-block;">{{scope.row[item]}}</div>
</div>
</template>
</el-table-column>
<el-table-column min-width="100" :key="item" label="抽检结果">
<template slot-scope="scope">
<div class="cellItem" style="display: inline-block;">
<div style="display: inline-block;">
<el-checkbox
ref="cellCheckBox"
label="错误"
:checked="scope.row.checkResultList[index] == 1"
:disabled="scope.row.disable == 1"
@change="handelCellClick(scope.row, scope.$index, item)"
/>
</div>
</div>
</template>
</el-table-column>
</template>
</el-table>
data数据
async watchTask(row) {
this.dialogVisible = true;
this.table2ColNames = [];
this.taskData2 = [];
this.detailType = row.checkStatus;
let { data } = await this.$Axios.get(
`${this.baseURL}/task/check?id=${row.id}`
);
if (data.code) {
this.$message({
type: "info",
message: data.msg
});
return false;
}
if (data.length == 0) {
this.tableData2 = [];
this.table2ColNames = row.checkDataColumnList;
return false;
}
data.forEach((item, i) => {
let tableRow = {};
this.table2ColNames = row.checkDataColumnList;
tableRow["id"] = row.id;
tableRow["disable"] = row.checkStatus;
tableRow["checkResultList"] = item.checkResultList;
const keyList = row.checkDataColumnList;
const valueList = item.checkDataValueList;
for (const index in keyList) {
let colName = keyList[index];
let colValue = valueList[index];
tableRow[colName] = colValue;
}
this.tableData2[i]=tableRow;
});
},
上一篇: PHP CURL模拟GET及POST函数代码_PHP
下一篇: Oracle 查询字段详细信息
推荐阅读
-
vue elementui el-form rules动态验证的实例代码详解
-
vue+iview动态渲染表格详解
-
elementUI table表格动态合并的示例代码
-
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
-
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
-
vue+elementUI实现表格关键字筛选高亮
-
详解VUE Element-UI多级菜单动态渲染的组件
-
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
-
vue elementUI table表格数据 滚动懒加载的实现方法
-
Vue.js实现表格渲染的方法