成功el-table-column前加图标
<template>
<div>
<!--工具条-->
<div style="padding-bottom: 0px; height: 48px">
<el-form :inline="true">
<el-form-item>
<el-input v-model="usernamef" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="fetchData">查询</el-button>
</el-form-item>
</el-form>
</div>
<el-table
v-loading="listLoading"
:data="list.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
element-loading-text="Loading"
border
fit
highlight-current-row
>
<el-table-column
prop="username"
label="用户名"
align="center"
width="100px"
>
<template slot-scope="scope">
<i></i>
<img style="width: 48px; height: 48px" :src="require('@/assets/img/xjbl_sel.png')" />
{{ scope.row.username }}
</template>
</el-table-column>
<el-table-column
prop="addtime"
label="添加日期"
align="center"
width="300px"
></el-table-column>
<el-table-column
prop="num1"
label="数量"
width="110px"
align="center"
></el-table-column>
<el-table-column label="操作" align="center" min-width="100px">
<template slot-scope="scope">
<el-button
type="info"
icon="el-icon-message"
@click="checkDetail(scope.row)"
circle
></el-button>
<el-button
type="primary"
icon="el-icon-edit"
@click="modifyData(scope.row)"
circle
></el-button>
<el-button
type="danger"
icon="el-icon-delete"
@click="deleteData(scope.row)"
circle
></el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
layout="prev, pager, next, sizes, total, jumper"
:page-sizes="[5, 10, 20, 100]"
:page-size="pageSize"
:total="list.length"
:current-page.sync="currentPage"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
style="text-align: center; margin-top: 1%"
></el-pagination>
<el-button type="text" @click="props()">弹页面</el-button>
</div>
</template>
<script>
import { getList, remove } from "@/api/test";
export default {
filters: {},
data() {
return {
list: [],
listLoading: true,
usernamef: "",
pageSize: 20,
currentPage: 1,
};
},
created() {
this.fetchData();
},
methods: {
props() {
window.open("/views/form/test_add", "_blank");
},
fetchData() {
this.listLoading = true;
let param = { username: this.usernamef };
getList(param).then((response) => {
this.list = response.Data;
this.listLoading = false;
this.currentPage = 1;
});
},
deleteData(rowdata) {
this.$alert("是否删除这条记录", "信息删除", {
confirmButtonText: "确定",
showCancelButton: true,
callback: (action) => {
var params = {
id: rowdata.ID,
};
if (action == "cancel") return;
remove(params).then((response) => {
if (response.IsSuccess) {
this.fetchData();
}
this.$message({
type: "info",
message: response.Message,
});
});
},
});
},
modifyData(rowData) {
this.$router.push("/patient/TEST/test_modify?id=" + rowData.ID);
},
checkDetail(rowData) {
this.$router.push("/patient/TEST/test_detail?id=" + rowData.ID);
},
handleCurrentChange: function (cpage) {
this.$data.currentPage = cpage;
},
handleSizeChange: function (psize) {
this.$data.pageSize = psize;
},
},
};
</script>
关键代码：
<el-table-column
prop="username"
label="用户名"
align="center"
width="100px"
>
<template slot-scope="scope">
<i></i>
<img style="width: 48px; height: 48px" :src="require('@/assets/img/xjbl_sel.png')" />
{{ scope.row.username }}
</template>
</el-table-column>