table显示switch切换操作
[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中；二选一实现
vue3代码
const viewImg=(row)=>{//预览图片
proxy.getTable(true).viewImg(row,{field:"Img"});//img改为row行数据里面的字段
}
const onInited=()=>{
columns.forEach((x) => {
//隐藏不需要显示的字段(下面的合并里面显示)
if (['CatalogId', 'GoodsCode', 'Img'].includes(x.field)) {
x.hidden = true
}
//给指定字段做合并显示
if (x.field == 'GoodsName') {
x.width = 240;
x.align="center";
x.render = (h, { row, column, index }) => {
//手动转换分类的字典编号
// let item = columns
// .find((c) => {
// return c.field == 'CatalogId'//改为你的字段
// })
// .bind.data.find((c) => {
// return c.key == row.CatalogId//改为你的字段
// })
// //获取转换的字典
// if (item) {
// catalog = item.value
// }
//自定义返回显示的内容、图片
return (
<div style="display:flex;padding:5px;cursor: pointer;text-align: left;">
<img
onClick={()=>{.viewImg(row)}}
style="height: 80px;width:70px;border-radius: 5px;object-fit: cover;"
src={proxy.http.ipAddress + row.Img}
/>
<div style="line-height: 1.2;margin:0 10px;font-size: 13px;" onClick={()=>{this.edit(row)}}>
<div style="color: #0f84ff;margin-bottom:5px;">{row.GoodsName}</div>
<div style="margin-bottom:5px;">
分类：<el-tag type="success">{catalog}</el-tag>{' '}
<span style="margin-left:10px;margin-right:5px;font-size:12px;">¥</span>
<span style="font-weight:bolder;color:red;font-size:15px;">{row.Price}</span>
</div>
<div>编码：{row.GoodsCode}</div>
</div>
</div>
)
}
}
})
}
vue2代码
viewImg(row){//预览图片
this.$refs.table.viewImg(row,{field:"Img"});
},
onInited(){
this.columns.forEach((x) => {
//隐藏不需要显示的字段(下面的合并里面显示)
if (['CatalogId', 'GoodsCode', 'Img'].includes(x.field)) {
x.hidden = true
}
//给指定字段做合并显示
if (x.field == 'GoodsName') {
x.width = 240;
x.align="center";
x.render = (h, { row, column, index }) => {
let catalog = row.CatalogId
//手动转换分类的字典编号
// let item = this.columns
// .find((c) => {
// return c.field == 'CatalogId'//改为你的字段
// })
// .bind.data.find((c) => {
// return c.key == row.CatalogId//改为你的字段
// })
// //获取转换的字典
// if (item) {
// catalog = item.value
// }
//自定义返回显示的内容、图片
return (
<div style="display:flex;padding:5px;cursor: pointer;text-align: left;">
<img
onClick={()=>{this.viewImg(row)}}
style="height: 80px;width:70px;border-radius: 5px;object-fit: cover;"
src={this.http.ipAddress + row.Img}
/>
<div style="line-height: 1.2;margin:0 10px;font-size: 13px;" onClick={()=>{this.edit(row)}}>
<div style="color: #0f84ff;margin-bottom:5px;">{row.GoodsName}</div>
<div style="margin-bottom:5px;">
分类：<el-tag type="success">{catalog}</el-tag>{' '}
<span style="margin-left:10px;margin-right:5px;font-size:12px;">¥</span>
<span style="font-weight:bolder;color:red;font-size:15px;">{row.Price}</span>
</div>
<div>编码：{row.GoodsCode}</div>
</div>
</div>
)
}
}
})
}