15 changed files with 950 additions and 408 deletions
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 582 B |
@ -0,0 +1,87 @@ |
|||
import axios from 'axios' |
|||
import store from "@/store" |
|||
|
|||
export const host=function(host="default"){ |
|||
return (process.env.NODE_ENV=="development"?{ |
|||
default:`http://192.168.0.116:8080/cell-analysis/` // 孙
|
|||
}:{ |
|||
default:"http://ym.ynncpzs.com:8080/xilin/", |
|||
})[host] |
|||
} |
|||
|
|||
// create an axios instance
|
|||
const service = axios.create({ |
|||
baseURL: '/', // url = base url + request url
|
|||
// withCredentials: true, // send cookies when cross-domain requests
|
|||
timeout: 30000 // request timeout
|
|||
}) |
|||
// request interceptor
|
|||
service.interceptors.request.use( config => { |
|||
if(!config.disabledLoad){ //禁止加载全局状态
|
|||
store.commit("data/setLoading",true) |
|||
} |
|||
if(config.proxy){ |
|||
config.baseURL=`/${config.proxy}` |
|||
}else{ |
|||
config.baseURL=host(config.host) |
|||
} |
|||
|
|||
if (typeof config.pathData === 'object') { |
|||
for (var key in config.pathData) { |
|||
config.url = config.url.replace(new RegExp(`/:${key}(\\/|$)`), "/"+encodeURIComponent(config.pathData[key])+"$1" ) |
|||
} |
|||
} |
|||
if(config.formData){ //表单数据
|
|||
config.headers["Content-Type"]="application/x-www-form-urlencoded;charset=UTF-8" |
|||
config.method="POST" |
|||
var formData = new FormData() |
|||
for(var i in config.formData){ |
|||
formData.append(i,config.formData[i]) |
|||
} |
|||
config.data=formData |
|||
} |
|||
config.headers = Object.assign({ |
|||
'X-Access-Token': store.getters['data/token'], |
|||
"Content-Type": "application/json;charset=UTF-8", |
|||
},config.headers||{}) |
|||
|
|||
return config |
|||
}, error => { |
|||
// do something with request error
|
|||
console.log(error) // for debug
|
|||
store.commit("data/setLoading",false) |
|||
return Promise.reject(error) |
|||
}) |
|||
|
|||
// response interceptor
|
|||
service.interceptors.response.use( |
|||
response => { |
|||
setTimeout(()=>{ |
|||
store.commit("data/setLoading", false) |
|||
},100) |
|||
|
|||
// console.log(response,"----------------ok------------------")
|
|||
if(response.status==200 && response.config.responseType=='blob')return response;//下载文件
|
|||
else if(response.status==200&&response.data.code==200)return{ statu:true, data:response.data.result, msg:response.data.message, source:response.data} |
|||
// else if(/^401$|^402$/.test(response.data.code)){
|
|||
// store.commit("data/clearToken", response.data.code)
|
|||
// return Promise.reject({})
|
|||
// }
|
|||
else return{ statu:false, msg: response.data.message||"", code:response.data.code??response.status } |
|||
}, |
|||
error => { |
|||
setTimeout(()=>{ |
|||
store.commit("data/setLoading",false) |
|||
},100) |
|||
|
|||
console.log("error code==",error.code) |
|||
console.log("error message=",error.message) |
|||
console.log("error response=",error.response) |
|||
|
|||
if(error.code=="ECONNABORTED") return{ statu:false, msg:"请求超时!" } |
|||
else if(error.response?.status==404) return {statu:false, msg:"地址不存在！"} |
|||
else return{ statu:false, msg: error.response.data?.message||"服务器错误!" } |
|||
} |
|||
) |
|||
|
|||
export default service; |
|||
@ -0,0 +1,275 @@ |
|||
<style lang="less" scoped> |
|||
.card{ |
|||
margin:10px auto!important; |
|||
padding:20px 30px; |
|||
table{ |
|||
width:100%; |
|||
tr{ |
|||
&>.score{ |
|||
width:230px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
&>.line{ |
|||
width:20px; |
|||
background:#F7FAFE; |
|||
} |
|||
&>.echart{ |
|||
width:882px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<template> |
|||
<div class="title"><img src="@/assets/img/home/content_title_icon.png"/>分析结果</div> |
|||
|
|||
<div class="card"> |
|||
<div class="title" data-title="基础评价指标"/> |
|||
<table> |
|||
<tr> |
|||
<td class="score"> |
|||
<span style="color:#333;margin-bottom:16px;">保守性(一致性)得分</span> |
|||
<el-progress type="circle" :percentage="90" :stroke-width="10" :width="80"> |
|||
<template #default="{percentage}"> |
|||
<span style="color:#007BFF;font-size:24px;font-weight:bold;">{{(percentage/10).toFixed(1)}}</span> |
|||
</template> |
|||
</el-progress> |
|||
<span style="color:#007BFF;margin-top:13px;">评价依据</span> |
|||
|
|||
<span style="color:#333;margin:30px 0 16px 0;">增殖能力得分</span> |
|||
<el-progress type="circle" :percentage="78" color="#24C142" :stroke-width="10" :width="80"> |
|||
<template #default="{percentage}"> |
|||
<span style="color:#24C142;font-size:24px;font-weight:bold;">{{(percentage/10).toFixed(1)}}</span> |
|||
</template> |
|||
</el-progress> |
|||
<span style="color:#007BFF;margin-top:13px;">评价依据</span> |
|||
</td> |
|||
<td class="line"/> |
|||
<td class="echart"> |
|||
<v-echarts :option="base" style="height:300px;" autoresize/> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</div> |
|||
|
|||
<div class="card"> |
|||
<div class="title" data-title="功能评价指标"/> |
|||
<table> |
|||
<tr> |
|||
<td class="score"> |
|||
<span style="color:#333;margin-bottom:16px;">免疫调控能力得分</span> |
|||
<el-progress type="circle" :percentage="90" :stroke-width="10" :width="80"> |
|||
<template #default="{percentage}"> |
|||
<span style="color:#007BFF;font-size:24px;font-weight:bold;">{{(percentage/10).toFixed(1)}}</span> |
|||
</template> |
|||
</el-progress> |
|||
<span style="color:#007BFF;margin-top:13px;">评价依据</span> |
|||
|
|||
<span style="color:#333;margin:30px 0 16px 0;">再生修复能力得分</span> |
|||
<el-progress type="circle" :percentage="78" color="#FFC600" :stroke-width="10" :width="80"> |
|||
<template #default="{percentage}"> |
|||
<span style="color:#FFC600;font-size:24px;font-weight:bold;">{{(percentage/10).toFixed(1)}}</span> |
|||
</template> |
|||
</el-progress> |
|||
<span style="color:#007BFF;margin-top:13px;">评价依据</span> |
|||
</td> |
|||
<td class="line"/> |
|||
<td class="echart"> |
|||
<v-echarts :option="works" style="height:300px;" autoresize/> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</div> |
|||
|
|||
<div class="card" style="margin-bottom:100px!important;"> |
|||
<div class="title" data-title="细胞优选综合评价"/> |
|||
<table> |
|||
<tr> |
|||
<td class="score"> |
|||
<span style="color:#333;margin-bottom:16px;">细胞综合评价</span> |
|||
<img src="@/assets/img/home/analysis_cell.png"/> |
|||
<span style="color:#24C142;font-size:16px;font-weight:bold;">全能型</span> |
|||
</td> |
|||
<td class="line"/> |
|||
<td class="echart"> |
|||
<v-echarts :option="cells" style="height:300px;" autoresize/> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</div> |
|||
</template> |
|||
<script setup> |
|||
import { computed } from "vue"; |
|||
|
|||
var base=computed(()=>({ |
|||
grid:{ |
|||
top:40, |
|||
right:10, |
|||
bottom:10, |
|||
left:10, |
|||
containLabel:true, |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
axisLine:{show:false}, |
|||
axisTick:{show:false}, |
|||
data: ['1', '2', '3', '4', '5', '6', '7'] |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
name:"细胞增殖曲线", |
|||
splitLine:{ |
|||
lineStyle:{ |
|||
type:"dashed" |
|||
} |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: [820, 932, 901, 934, 1290, 1330, 1320], |
|||
type: 'line', |
|||
areaStyle: { |
|||
color:{ |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ offset: 0, color: 'rgba(14, 132, 251, 1)' }, |
|||
{ offset: 0.9, color: 'rgba(14, 132, 251, 0)' } |
|||
], |
|||
global: false |
|||
} |
|||
} |
|||
} |
|||
] |
|||
})) |
|||
var works=computed(()=>({ |
|||
grid:{ |
|||
top:40, |
|||
right:65, |
|||
bottom:10, |
|||
left:10, |
|||
containLabel:true, |
|||
}, |
|||
xAxis: { |
|||
type: 'value', |
|||
axisLabel:{show:false}, |
|||
splitLine:{show:false} |
|||
}, |
|||
yAxis: { |
|||
type: 'category', |
|||
name:"T细胞免疫亚群评估", |
|||
axisTick:{show:false}, |
|||
axisLine:{show:false}, |
|||
data: ['CD3⁺', 'CD3⁺CD8⁺', 'CD8⁺', 'CD8⁺', 'CD8⁺', 'CD8⁺', 'CD8⁺'] |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: 'bar', |
|||
showBackground: true, |
|||
barWidth:12, |
|||
itemStyle:{ |
|||
color:"#007BFF", |
|||
borderRadius:10, |
|||
}, |
|||
backgroundStyle: { |
|||
color: 'rgba(0, 123, 255, 0.15)', |
|||
borderRadius:10, |
|||
}, |
|||
barGap:"-100%", |
|||
data: [120, 200, 150, 80, 70, 110, 130], |
|||
}, |
|||
{ |
|||
type: 'bar', |
|||
barWidth:15, |
|||
itemStyle:{ |
|||
opacity:0, |
|||
}, |
|||
animation:false, |
|||
label:{ |
|||
show:true, |
|||
opacity:1, |
|||
color:"#007BFF", |
|||
fontWeight:"bold", |
|||
fontSize:16, |
|||
position:"right", |
|||
formatter(params){ |
|||
return `74.64%` |
|||
}, |
|||
}, |
|||
data: [200, 200, 200, 200, 200, 200, 200], |
|||
} |
|||
] |
|||
})) |
|||
var cells=computed(()=>({ |
|||
grid:{ |
|||
top:40, |
|||
right:10, |
|||
bottom:20, |
|||
left:30, |
|||
containLabel:true, |
|||
}, |
|||
xAxis: { |
|||
name:"增殖能力", |
|||
nameLocation:"middle", |
|||
nameTextStyle:{ |
|||
lineHeight:30, |
|||
}, |
|||
axisLine:{show:false}, |
|||
axisTick:{show:false}, |
|||
splitLine:{ |
|||
lineStyle:{type:"dashed"} |
|||
}, |
|||
}, |
|||
yAxis: { |
|||
name:"分化能力", |
|||
nameLocation:"middle", |
|||
nameTextStyle:{ |
|||
lineHeight:30, |
|||
}, |
|||
axisLine:{show:false}, |
|||
axisTick:{show:false}, |
|||
splitLine:{ |
|||
lineStyle:{type:"dashed"} |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: 'scatter', |
|||
symbolSize: 20, |
|||
itemStyle:{ |
|||
color:"#24C142", |
|||
}, |
|||
data: [ |
|||
[10.0, 8.04], |
|||
[8.07, 6.95], |
|||
[13.0, 7.58], |
|||
[9.05, 8.81], |
|||
[11.0, 8.33], |
|||
[14.0, 7.66], |
|||
[13.4, 6.81], |
|||
[10.0, 6.33], |
|||
[14.0, 8.96], |
|||
[12.5, 6.82], |
|||
[9.15, 7.2], |
|||
[11.5, 7.2], |
|||
[3.03, 4.23], |
|||
[12.2, 7.83], |
|||
[2.02, 4.47], |
|||
[1.05, 3.33], |
|||
[4.05, 4.96], |
|||
[6.03, 7.24], |
|||
[12.0, 6.26], |
|||
[12.0, 8.84], |
|||
[7.08, 5.82], |
|||
[5.02, 5.68] |
|||
], |
|||
} |
|||
] |
|||
})) |
|||
</script> |
|||
@ -0,0 +1,270 @@ |
|||
<style lang="less" scoped> |
|||
.card{ |
|||
margin:10px auto!important; |
|||
&>.title{ |
|||
color:#0068D1; |
|||
font-weight: bold; |
|||
font-size:22px; |
|||
width:max-content; |
|||
margin-bottom:25px; |
|||
position:relative; |
|||
&:before{ |
|||
content:" "; |
|||
position:absolute; |
|||
background:#DCEDFE; |
|||
width:calc(100% - 10px); |
|||
height:80%; |
|||
top:8px; |
|||
left:-3px; |
|||
} |
|||
&:after{ |
|||
content:attr(data-title); |
|||
position:relative; |
|||
} |
|||
} |
|||
.el-form:deep{ |
|||
margin-bottom:-18px; |
|||
.el-col.title{ |
|||
margin-bottom:10px; |
|||
font-weight: bold; |
|||
color:#333; |
|||
} |
|||
.el-form-item__content{ |
|||
flex-wrap: nowrap; |
|||
.example{ |
|||
flex-shrink: 0; |
|||
color:#0169D2; |
|||
margin-left:10px; |
|||
cursor: pointer; |
|||
&:hover{ |
|||
opacity: 0.7; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<template> |
|||
<div class="title"><img src="@/assets/img/home/content_title_icon.png"/>参数设定</div> |
|||
|
|||
<div class="card"> |
|||
<div class="title" data-title="基础评价指标" /> |
|||
<el-form label-width="160px" label-position="right"> |
|||
<el-row> |
|||
<el-col :span="10"> |
|||
<el-form-item label="核型分析结果"> |
|||
<el-select placeholder="请选择" style="width:100%;"></el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="14"> |
|||
<el-form-item label="核型"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="STR比对结果"> |
|||
<el-input placeholder="上传基因型文件"> |
|||
<template #append> |
|||
<el-button>上传文件</el-button> |
|||
</template> |
|||
</el-input> |
|||
<span class="example">示例文件</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="10"> |
|||
<el-form-item label="ATCC与DSMZ比对结果"> |
|||
<el-select placeholder="请选择" style="width:100%;"></el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="7"> |
|||
<el-form-item label-width="10px"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="7"> |
|||
<el-form-item label-width="10px"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
<div class="card"> |
|||
<div class="title" data-title="增殖能力评估" /> |
|||
<el-form label-position="right"> |
|||
<el-row :gutter="10"> |
|||
<el-col :span="24"> |
|||
<el-form-item label="增殖能力评估"> |
|||
<el-input placeholder="上传细胞计数表，绘制增殖曲线图"> |
|||
<template #append> |
|||
<el-button>上传文件</el-button> |
|||
</template> |
|||
</el-input> |
|||
<span class="example">示例文件</span> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col class="title" :span="24">收获细胞数</el-col> |
|||
<el-col :span="10"> |
|||
<el-form-item label="代数"> |
|||
<el-select placeholder="请选择" style="width:100%;"></el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="7"> |
|||
<el-form-item label="支数"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="7"> |
|||
<el-form-item label="每支细胞数"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
<div class="card"> |
|||
<div class="title" data-title="细胞表面抗原分析" /> |
|||
<el-form label-width="85px" label-position="right"> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<el-form-item label="CD73(%)"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="CD99(%)"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="CD105(%)"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="260px" label="CD11b/CD19/CD34/CD45/HLA-DR(%)"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
<div class="card"> |
|||
<div class="title" data-title="分化能力评估" /> |
|||
<el-form> |
|||
<el-row :gutter="10"> |
|||
<el-col class="title" :span="24">骨分化能力</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="茜素红染色值"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="BMP2表达量"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="MMP13表达量"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="COL10A1表达量"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
|
|||
<el-col class="title" :span="24">软骨分化能力</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="阿辛蓝染色值"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="COL2A1表达量"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="ACAN表达量"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
|
|||
<el-col class="title" :span="24">脂肪分化能力</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="油红“O”染色值"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="IGF-1表达量"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="PPARG表达量"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
<div class="card"> |
|||
<div class="title" data-title="杀瘤活性评估" /> |
|||
<el-form> |
|||
<el-form-item label="骨分化特异基因表达量"> |
|||
<el-input placeholder="待补充"/> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<div class="card"> |
|||
<div class="title" data-title="免疫调控能力评估" /> |
|||
<el-form> |
|||
<el-row :gutter="10"> |
|||
<el-col :span="24" class="title">免疫抑制能力</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="Th1抑制率(标准化)"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="Th2抑制率(标准化)"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="Th17抑制率(标准化)"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="9"> |
|||
<el-form-item label="Tregs增殖促进率(标准化)"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label="TNF-α抑制率(标准化)"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="7"> |
|||
<el-form-item label="PBMC增殖倍数"> |
|||
<el-input placeholder="请输入"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
|
|||
<el-col :span="24" class="title">软骨分化能力</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="免疫调节能力"> |
|||
<el-input placeholder="待补充"/> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
<script setup> |
|||
|
|||
</script> |
|||
@ -0,0 +1,84 @@ |
|||
<style lang="less" scoped> |
|||
.search{ |
|||
width:1200px; |
|||
margin:auto auto 15px auto; |
|||
height:33px; |
|||
display:flex; |
|||
&>.el-select:deep{ |
|||
width:160px; |
|||
.el-input{ |
|||
--el-input-border-radius:20px; |
|||
--el-input-bg-color:transparent; |
|||
} |
|||
} |
|||
&>.input{ |
|||
flex-grow: 1; |
|||
height:100%; |
|||
border-radius: 40px; |
|||
text-align: center; |
|||
line-height: 33px; |
|||
font-size:16px; |
|||
border:1px solid #ccc; |
|||
border-radius: 30px; |
|||
color:#999; |
|||
margin-left:20px; |
|||
cursor: text; |
|||
input{ |
|||
width:100%; |
|||
border:none; |
|||
outline: none; |
|||
height:100%; |
|||
background:transparent; |
|||
text-align: center; |
|||
color:#333; |
|||
font-size:20px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<template> |
|||
<div class="title"><img src="@/assets/img/home/content_title_icon.png"/>细胞基础信息登记</div> |
|||
<div class="search"> |
|||
<el-select placeholder="细胞类型"></el-select> |
|||
<div class="input" @click="focus=true"> |
|||
<input v-if="focus || searchVal.search" @change="pageNo=1;search()" v-model="searchVal.search" ref="input" @blur="focus=false"/> |
|||
<template v-else> |
|||
<svg-icon name="search"/> <span>请输入搜索关键词</span> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
<div class="card"> |
|||
<el-table :data="list" :header-cell-style="row=>({background:'#F4F6FD',border:'none'})" :cell-style="row=>({b:{color:'#215FFB'}})[row.column.property]"> |
|||
<el-table-column label="细胞编号" prop="a"/> |
|||
<el-table-column label="物种 (Speices)" prop="a"/> |
|||
<el-table-column label="细胞类型 (cell type)" prop="a"/> |
|||
<el-table-column label="操作" prop="b"/> |
|||
<el-table-column label="备注" prop="a"/> |
|||
<template #empty> |
|||
<el-empty description="暂无数据"/> |
|||
</template> |
|||
</el-table> |
|||
</div> |
|||
</template> |
|||
<script setup> |
|||
import { nextTick, reactive, ref, watch } from "vue"; |
|||
|
|||
var focus=ref(false) |
|||
var input=ref() |
|||
var searchVal=reactive({ |
|||
|
|||
}) |
|||
var list=ref([ |
|||
{a:1,b:2}, |
|||
{a:1,b:2}, |
|||
{a:1,b:2}, |
|||
{a:1,b:2}, |
|||
]) |
|||
watch(focus, n=>{ |
|||
if(n){ |
|||
nextTick(()=>{ |
|||
input.value.focus() |
|||
}) |
|||
} |
|||
}) |
|||
</script> |
|||
Loading…
Reference in new issue