<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
<script src="jquery-3.4.1.js"></script>
<!-- element ui组件 -->
<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
</head>
<body>
<div id="app">
<!-- 表格 表头样式 选择后获取本行内容 展开后获取值-->
<el-table ref="ref" :data="resData" :header-cell-style="css" @selection-change="handleSelectionChange" @expand-change="expanChange">
<el-table-column type="selection"></el-table-column>
<el-table-column v-for="head in fields" :label="head.title" :width="head.width">
<template slot-scope="scope">
<template v-if="head.field=='CZ'">
<span>操作</span>
</template>
<template v-else>
<span v-html="dContrast(head.field,scope.row[head.field])"></span>
</template>
</template>
</el-table-column>
<!-- 展开行后的内容 -->
<el-table-column type="expand">
<!-- 可以放子组件 -->
</el-table-column>
</el-table>
</div>
</body>
<script>
var vm;
$(function () {
vm = new Vue({
el: '#app',
data: {
resData: [
{ task_name: 'aaaa',task_name1: 'aaaa',task_name2: 'aaaa',task_name3: 'aaaa',task_name4: 'aaaa' },
],
fields: [
{ field: 'task_name', title: '任务名称',200 },
{ field: 'task_name1', title: '任务1' },
{ field: 'task_name2', title: '任务2' },
{ field: 'task_name3', title: '任务3' },
{ field: 'task_name4', title: '任务4' },
{ field: 'CZ', title: '操作' },
],
css:{
background:'#38b48b',
color:'white',
borderColor:'#fff'
}
},
mounted: function () {
},
methods: {
handleSelectionChange(v){
console.log(v);
},
expanChange(row,expandedRows){
console.log(expandedRows);
console.log(row);
},
dContrast(key, dval) {
// console.log(key);
// console.log(dval);
return dval;
}
}
})
})
</script>
</html>
