1.通过npm安装SignalR。这个地方需要注意安装@microsoft/signalr。另外一个版本在我这里总是报错。
2.我的测试代码主要看initSignalR()部分即可,其他的是我测试代码。
另外signalR需要在当前页面导入,不能用全局的方法main.js中导入,我这里会出错
<script>
import * as signalR from "@microsoft/signalr";
export default {
data() {
return {
name: "'aaaabbbb22'",
tableData: [],
signal: null,
}
},
methods: {
changeName() {
this.name = 'easyboot'
},
// 接收数据
receiveData(msgInfo) {
console.log('signalR',msgInfo)
this.data = msgInfo;
},
initSignalR() {
this.signal = new signalR.HubConnectionBuilder()
//服务器地址
// .withUrl('http://192.168.0.110:8100/myHub', {})
.withUrl('http://192.168.0.106:5127/chatHub', {})
.withAutomaticReconnect()
.build()
// 定义后端调用的方法
this.signal.on("ReceiveMsg", this.receiveData);
this.signal.start().then(() => {
console.log('连接');
}).catch(() => {
console.log('连接失败');
})
},
getTableData() {
let cont = 0;
let tableData = [];
while (cont < 10000) {
cont = cont + 1;
let object = {
name: "王小虎" + cont,
sex: cont,
att1: "att1 " + cont,
att2: "att2 " + cont,
att3: "att3 " + cont,
att4: "att4 " + cont,
att5: "att5 " + cont,
att6: "att6 " + cont,
att7: "att7 " + cont,
};
tableData.push(object);
}
setTimeout(() => {
this.tableData = tableData;
// console.log(tableData,this.tableData[0].name)
}, 0);
}
},
created() {
this.getTableData();
this.initSignalR();
//this.tableData = window.MOCK_TREE_DATA_LIST
}
}
</script >
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<p>{{ name }}</p>
<vxe-table :data="tableData" height="400" stripe show-overflow border round :column-config="{ resizable: true }"
:row-config="{ isCurrent: true, isHover: true }">
<vxe-column type="seq" width="60"></vxe-column>
<vxe-column field="name" sortable title="Name"></vxe-column>
<vxe-column field="role" title="Role"></vxe-column>
<vxe-column type="seq" title="Seq" width="60"></vxe-column>
<vxe-column field="att1" title="att1"></vxe-column>
<vxe-column field="att2" title="att2"></vxe-column>
<vxe-column type="att3" title="att3" width="60"></vxe-column>
<vxe-column field="att4" title="att4"></vxe-column>
<vxe-column field="att5" title="att5"></vxe-column>
<vxe-column type="att6" title="att6" width="60"></vxe-column>
<vxe-column field="att7" title="att7"></vxe-column>
<vxe-column field="role" title="Role"></vxe-column>
<vxe-column type="seq" title="Seq" width="60"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="role" title="Role"></vxe-column>
<vxe-column type="seq" title="Seq" width="60"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="role" title="Role"></vxe-column>
<vxe-column type="seq" title="Seq1" width="60"></vxe-column>
<vxe-column field="name" title="Name1"></vxe-column>
<vxe-column field="role" title="Role1"></vxe-column>
<vxe-column type="seq" title="Seq12" width="60"></vxe-column>
<vxe-column field="name" title="Name12"></vxe-column>
<vxe-column field="role" title="Role12"></vxe-column>
<!-- <vxe-colgroup title="Group1">
<vxe-column field="sex" title="Sex"></vxe-column>
<vxe-column field="address" title="Address"></vxe-column>
</vxe-colgroup> -->
</vxe-table>
<vxe-table border height="400" stripe :column-config="{ resizable: true }" :row-config="{ isHover: true }"
:data="tableData">
<vxe-column type="seq" width="60"></vxe-column>
<vxe-column field="name" sortable title="Name" width="300"></vxe-column>
<vxe-column field="sex" title="最小列宽" min-width="300"></vxe-column>
<vxe-column field="age" title="Age" width="300"></vxe-column>
<vxe-column field="time" title="Time" width="300"></vxe-column>
<vxe-column field="address" title="Address" width="300" show-overflow></vxe-column>
</vxe-table>
<br />
<br />
<button @click="changeName">改变名称</button>
<button @click="changeName">改变名称1</button>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<!-- <HelloWorld msg="Vite + Vue" /> -->
</template>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.vxe-textarea--inner {
line-height: inherit;
}
/*滚动条整体部分*/
.mytable-scrollbar ::-webkit-scrollbar {
width: 20px;
height: 21px;
}
/*滚动条的轨道*/
.mytable-scrollbar ::-webkit-scrollbar-track {
background-color: #FFFFFF;
}
/*滚动条里面的小方块,能向上向下移动*/
.mytable-scrollbar ::-webkit-scrollbar-thumb {
background-color: #bfbfbf;
border-radius: 5px;
border: 1px solid #F1F1F1;
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
.mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
background-color: #A8A8A8;
}
.mytable-scrollbar ::-webkit-scrollbar-thumb:active {
background-color: #787878;
}
/*边角,即两个滚动条的交汇处*/
.mytable-scrollbar ::-webkit-scrollbar-corner {
background-color: #FFFFFF;
}
</style>