(el-Table)操作(不使用 ts)：Element-plus 中Table 表格组件：多选修改成支持单选及表格相关样式的调整

news2024/10/5 13:42:51

Ⅰ、Element-plus 提供的 Table 表格组件与想要目标情况的对比：

1、Element-plus 提供 Table 组件情况：

其一、Element-ui 自提供的 Table 代码情况为(示例的代码)：

在这里插入图片描述


// Element-plus 自提供的代码：
// 此时是使用了 ts 语言环境，但是我在实际项目中并没有使用 ts 语言和环境；

<template>
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column label="Date" width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column property="name" label="Name" width="120" />
    <el-table-column property="address" label="Address" show-overflow-tooltip />
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData[1], tableData[2]])"
      >Toggle selection status of second and third rows</el-button
    >
    <el-button @click="toggleSelection()">Clear selection</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElTable } from 'element-plus'

interface User {
  date: string
  name: string
  address: string
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

代码地址(直接点击下面 url 跳转)：https://element-plus.gitee.io/zh-CN/component/table.html#多选

其二、页面的显示情况为：
在这里插入图片描述

2、目标想修改后的情况:

在这里插入图片描述

Ⅱ、实现 Table 表格组件达到目标效果变化的过程：

1、 Table 表格组件成功引入 vue3 项目的过程(去除了 ts 的语法)：

其一、代码：


<template>
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column label="Date" width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column property="name" label="Name" width="120" />
    <el-table-column property="address" label="Address" show-overflow-tooltip />
  </el-table>
</template>

<script setup>

import { ref } from 'vue'

const tableData =ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
</script>

<style lang="scss" scoped>

</style>

其二、效果展示：

// 可以看出此时是支持多选的;
在这里插入图片描述

2、 Table 表格组件添加展示样式处理的过程：

其一、代码：

<script setup>
import { ref } from 'vue'

const multipleTable = ref('')

// do not use same name with ref
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])

// 设置 table 表格中不同行的背景颜色;
const tableRowClassName = (val) => {
  if(val.rowIndex %2 === 0){
    return 'double-row'
  } else {
    return 'single-row'
  }
}
</script>

<template>
  <div class="my_project">
    <div class="project">
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 1000px"
        :row-class-name="tableRowClassName"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="Date" width="120">
          <template #default="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column property="name" label="Name" width="120" />
        <el-table-column property="address" label="Address" show-overflow-tooltip />
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.my_project {
  margin: 30px auto;
  background-color: #c7cacf;  // 设置整体的背景色(即：表格外的背景颜色);
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 40px 0px;
  // 设置表格表头的背景色;
  ::v-deep(.el-table th) {
    background-color: rgb(154, 201, 207);
  }
  // 表格表头的下边框；
  ::v-deep(.el-table th.is-leaf) {
    border-bottom: 1px solid #557A95;
    font-weight: 700;
    font-size: 16px;
    color: black;
  }

  // 将表格的每一行悬停的背景色都设置为：transparent(即：没有其他展示)，或其它颜色(如：yellowgreen) ;
  ::v-deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
    background-color: yellowgreen;
  }
  // 设置表格内双行的背景色(如：0,2,4........)
  ::v-deep(.el-table .double-row) {
    background-color: #e6f1f9;
  }
  // 设置表格内单行的背景色(如：1，3，5.......)
  ::v-deep(.el-table .single-row) {
    background-color: #d6e6f5;
  }
  .project {
    margin: 20px;
  }
}
</style>

其二、效果展示：

// 此时的悬停颜色设置成了：yellowgreen;

在这里插入图片描述

3、 Table 表格组件将支持多选的操作变成支持单选的过程：

其一、代码：

<script setup>
import { ref } from 'vue'

const selectData = ref('')
const multipleTable = ref('')
const isDelete = ref(true)

// do not use same name with ref
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])

// 此时是将多选操作变成单选操作的函数的过程；
const select = ((selection, row) => {

    // 清除所有勾选项的操作;

    // 注意：this.$refs.multipleTable 是 vue2 的语法;
    // this.$refs.multipleTable.clearSelection()
    multipleTable.value.clearSelection()



    // 主要用于将当前勾选的表格状态清除;
    // 当表格数据都没有被勾选的时候就返回;
    if(selection.length == 0)  {
      isDelete.value = true
      return
    }

    
    // 注意：this.$refs.multipleTable 是 vue2 的语法;
    // this.$refs.multipleTable.toggleRowSelection(row, true);  
    multipleTable.value.toggleRowSelection(row, true);
    console.log(selection,1111111);
    console.log(row,22222222);
    isDelete.value = false
})


// 表格的选中 可以获得当前选中的数据(但和多选变成单选的操作无关;)
const handleSelectionChange = ((val) => {
  selectData.value = val
})
</script>

<template>
  <div class="my_project">
    <div class="project">
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 1000px"
        @select="select"
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="Date" width="120">
          <template #default="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column property="name" label="Name" width="120" />
        <el-table-column property="address" label="Address" show-overflow-tooltip />
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.my_project {
  margin: 30px auto;
  background-color: #c7cacf;  // 设置整体的背景色(即：表格外的背景颜色);
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 40px 0px;
  // 取消多选第一列的展示(即：将多选变成单选的第一步); 取消该样式后，就不会出现多选的情况；但由此可知还有其他的方法来实现单选;
  ::v-deep(.el-table th.el-table__cell:nth-child(1) .cell) {
    visibility: hidden;
  }
  .project {
    margin: 20px;
  }
}
</style>

其二、效果展示：

在这里插入图片描述

在这里插入图片描述
4、关于 Table 表格组件样式设置的其它用法：

其一、给表格头和表格每个 cell 添加样式(方式一)：

A、代码：

// 此时用的是 :cell-style="{borderColor:'#01e3ed'}" :header-cell-style="{borderColor:'#01e3ed'}"，但好像没有很好的效果，只是将原有的颜色变了而已;

<script setup>
import { ref } from 'vue'

const multipleTable = ref('')

// do not use same name with ref
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
</script>
     


<template>
  <div class="my_project">
    <div class="project">
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 1000px"
        @select="select"
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
        :cell-style="{borderColor:'#01e3ed'}"
        :header-cell-style="{borderColor:'#01e3ed'}"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="Date" width="120">
          <template #default="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column property="name" label="Name" width="120" />
        <el-table-column property="address" label="Address" show-overflow-tooltip />
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.my_project {
  margin: 30px auto;
  background-color: #c7cacf;  // 设置整体的背景色(即：表格外的背景颜色);
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 40px 0px;
  .project {
    margin: 20px;
  }
}
</style>

B、效果展示：

在这里插入图片描述

其二、给表格头和表格每个 cell 添加样式(方式二)：

A、代码为：

<script setup>
import { ref } from 'vue'

const multipleTable = ref('')

// do not use same name with ref
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
</script>
     


<template>
  <div class="my_project">
    <div class="project">
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 1000px"
        @select="select"
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="Date" width="120">
          <template #default="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column property="name" label="Name" width="120" />
        <el-table-column property="address" label="Address" show-overflow-tooltip />
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.my_project {
  margin: 30px auto;
  background-color: #c7cacf;  // 设置整体的背景色(即：表格外的背景颜色);
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 40px 0px;
  ::v-deep .el-table__body td.el-table__cell {
    border: 1px solid #557A95;  // 此时是设置表格每一个 cell 的边框颜色(但不包括最外的上下左右边框);
    // background-color: blue;    // 此时是设置表格的每一个 cell 的背景颜色;
  }
  ::v-deep(.el-table th.el-table__cell) {
    // background-color: #e6f1f9;
    // background-color: red;     // 此时是设置表格头的每一个 cell 的背景颜色;
    border: 1px solid #557A95;  // 此时是设置表格头的每一个 cell 的边框颜色(但不包括最外的上下左右边框)；
  }
  .project {
    margin: 20px;
  }
}
</style>

B、页面展示为：

// 上右左边框，都有了;
在这里插入图片描述

其三、给整个表格添加边框：

A、代码为：

<script setup>
import { ref } from 'vue'

const multipleTable = ref('')

// do not use same name with ref
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
</script>
     


<template>
  <div class="my_project">
    <div class="project">
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 1000px"
        @select="select"
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="Date" width="120">
          <template #default="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column property="name" label="Name" width="120" />
        <el-table-column property="address" label="Address" show-overflow-tooltip />
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.my_project {
  margin: 30px auto;
  background-color: #c7cacf;  // 设置整体的背景色(即：表格外的背景颜色);
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 40px 0px;
  // 此时可以设置整个表格(即：表格最外面)的 border 的值、类型和颜色;
  ::v-deep(.el-table) {
    border: 1px solid red;
  }
  .project {
    margin: 20px;
  }
}
</style>

B、页面展示为：

// 此时是通过 border 值将表格外面的颜色发生了变化;
在这里插入图片描述

Ⅲ、修改 Table 表格组件达到目标效果的展示(即：多选修改成单选)：

1、整体的代码(即：总的代码)：



<script setup>
import { ref } from 'vue'

const selectData = ref('')
const multipleTable = ref('')
const isDelete = ref(true)

// do not use same name with ref
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])

// 设置 table 表格中不同行的背景颜色;
const tableRowClassName = (val) => {
  if(val.rowIndex %2 === 0){
    return 'double-row'
  } else {
    return 'single-row'
  }
}



const select = ((selection, row) => {

    // 清除所有勾选项的操作;

    // 注意：this.$refs.multipleTable 是 vue2 的语法;
    // this.$refs.multipleTable.clearSelection()
    multipleTable.value.clearSelection()



    // 主要用于将当前勾选的表格状态清除;
    // 当表格数据都没有被勾选的时候就返回;
    if(selection.length == 0)  {
      isDelete.value = true
      return
    }

    
    // 注意：this.$refs.multipleTable 是 vue2 的语法;
    // this.$refs.multipleTable.toggleRowSelection(row, true);  
    multipleTable.value.toggleRowSelection(row, true);
    console.log(selection,1111111);
    console.log(row,22222222);
    isDelete.value = false
})


// 表格的选中 可以获得当前选中的数据
const handleSelectionChange = ((val) => {
  selectData.value = val
})
</script>

<template>
  <div class="my_project">
    <div class="project">
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 1000px"
        @select="select"
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="Date" width="120">
          <template #default="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column property="name" label="Name" width="120" />
        <el-table-column property="address" label="Address" show-overflow-tooltip />
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.my_project {
  margin: 30px auto;
  background-color: #c7cacf;  // 设置整体的背景色(即：表格外的背景颜色);
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 40px 0px;
  // 设置表格表头的背景色;
  ::v-deep(.el-table th) {
    background-color: rgb(154, 201, 207);
  }
  // 表格表头的下边框；
  ::v-deep(.el-table th.is-leaf) {
    border-bottom: 1px solid #557A95;
    font-weight: 700;
    font-size: 16px;
    color: black;
  }
  // 取消多选第一列的展示(即：将多选变成单选的第一步);
  ::v-deep(.el-table th.el-table__cell:nth-child(1) .cell) {
    visibility: hidden;
  }
  // 将表格的每一行悬停的背景色都设置为：transparent(即：没有其他展示)，或其它颜色(如：yellowgreen) ;
  ::v-deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
    background-color: yellowgreen;
  }
  // 设置表格内双行的背景色(如：0,2,4........)
  ::v-deep(.el-table .double-row) {
    background-color: #e6f1f9;
  }
  // 设置表格内单行的背景色(如：1，3，5.......)
  ::v-deep(.el-table .single-row) {
    background-color: #d6e6f5;
  }
  .project {
    margin: 20px;
  }
}
</style>

2、整体效果的展示：

在这里插入图片描述

Ⅳ、小结：

其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、若有转发或引用本文章内容，请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易，且行且珍惜！
其三、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/879164.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Windows11中使用OneDrive按Print Screen截屏按键，把截图自动保存到OneDrive中

Windows11中使用OneDrive按Print Screen截屏按键，把截图自动保存到OneDrive中

参考&#xff1a;关于Onedrive 我已经勾选了自动保存屏幕截图 但是我截图之后我的图片并没有上传到onedrive上面 - Microsoft Community 1. 打开Windows 11的设置&#xff0c;可以通过按下Win I键来快速打开设置&#xff1b; 2. 设置--辅助功能--键盘--使用”print Screen“键…
阅读更多...
Rust 重载运算符｜复数结构的“加减乘除”四则运算

Rust 重载运算符｜复数结构的“加减乘除”四则运算

复数 基本概念 复数定义 由实数部分和虚数部分所组成的数&#xff0c;形如a&#xff0b;bi 。 其中a、b为实数&#xff0c;i 为“虚数单位”&#xff0c;i -1&#xff0c;即虚数单位的平方等于-1。 a、b分别叫做复数a&#xff0b;bi的实部和虚部。 当b0时&#xff0c;a&…
阅读更多...
codeforces代:

codeforces代:

感受思维的美丽&#xff0c;abcde题目的思路是怎么样的&#xff1a; 上蓝 上紫 可以代 &#xff1a;有问题可以评论区 直接问我 也可以q: 639682754
阅读更多...
【严重】Smartbi未授权设置Token回调地址获取管理员权限

【严重】Smartbi未授权设置Token回调地址获取管理员权限

漏洞描述 Smartbi是一款商业智能应用&#xff0c;提供了数据集成、分析、可视化等功能&#xff0c;帮助用户理解和使用他们的数据进行决策。 在 Smartbi 受影响版本中存在Token回调地址漏洞&#xff0c;未授权的攻击者可以通过向目标系统发送POST请求/smartbix/api/monitor/s…
阅读更多...
python_PyQt5运行股票研究python方法工具V1.0

python_PyQt5运行股票研究python方法工具V1.0

写在前面&#xff1a; 1 在写研究方法过程中&#xff08;例如&#xff1a;股票研究&#xff09;&#xff0c;很多方法根据数据的更新需要重复运行获取新的结果&#xff0c;本工具就是固化这些需要重复运行的代码&#xff0c;可以直接在工具中运行得到更新的结果。 2 本文是V1…
阅读更多...
并发编程系列-Semaphore

并发编程系列-Semaphore

Semaphore&#xff0c;如今通常被翻译为"信号量"&#xff0c;过去也曾被翻译为"信号灯"&#xff0c;因为类似于现实生活中的红绿灯&#xff0c;车辆是否能通行取决于是否是绿灯。同样&#xff0c;在编程世界中&#xff0c;线程是否能执行取决于信号量是否允…
阅读更多...
DevOps?自动化运维！

DevOps?自动化运维！

by: 雪月三十 DevOps流程图 DevOps介绍 命名 DevOps是Dev和Ops的结合 Dev&#xff08;developer开发&#xff09; Ops&#xff08;operation运维&#xff09; 矛盾 在企业中dev和ops是有一种天然的矛盾&#xff0c;dev要求的是快速迭代&#xff0c;给公司挖掘出商业的价值…
阅读更多...
c++实现多进程执行多个shell脚本

c++实现多进程执行多个shell脚本

一 参考 system()、exec()、fork()三个与进程有关的函数的比较 - 青儿哥哥 - 博客园 (cnblogs.com)https://www.cnblogs.com/qingergege/p/6601807.htmlfork执行流程分析_fork子进程和父进程执行顺序_cytf的博客-CSDN博客https://blog.csdn.net/qq_27420299/articl
阅读更多...
IE实验-Qos教学实验

IE实验-Qos教学实验

S1 diffserv domain boss //创建差分服务域 8021p-inbound 0 phb ef green //将外部优先级为0的流量&#xff0c;映射到内部优先级ef interface GigabitEthernet0/0/2 trust upstream boss //在接口下调用查分服务域 trust dscp override qos map-table dscp-dscp acl …
阅读更多...
【新品发布】ChatWork企业知识库系统源码

【新品发布】ChatWork企业知识库系统源码

系统简介 基于前后端分离架构以及Vue3、uni-app、ThinkPHP6.x、PostgreSQL、pgvector技术栈开发&#xff0c;包含PC端、H5端。 ChatWork支持问答式和文档式知识库&#xff0c;能够导入txt、doc、docx、pdf、md等多种格式文档。 导入数据完成向量化训练后&#xff0c;用户提问…
阅读更多...
小米发布会：雷军成长故事与创新壮举，AI大模型技术引领未来,雷军探索之路之从创业波折到小米AI领航，成就高端化传奇!

小米发布会：雷军成长故事与创新壮举，AI大模型技术引领未来,雷军探索之路之从创业波折到小米AI领航，成就高端化传奇!

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…
阅读更多...
基于物理场的动态模式分解(piDMD)研究（Matlab代码实现）

基于物理场的动态模式分解(piDMD)研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
翻转二叉树

翻转二叉树

声明 该系列文章仅仅展示个人的解题思路和分析过程&#xff0c;并非一定是优质题解&#xff0c;重要的是通过分析和解决问题能让我们逐渐熟练和成长&#xff0c;从新手到大佬离不开一个磨练的过程&#xff0c;加油&#xff01; 原题链接 翻转二叉树备战技术面试&#xff1f;…
阅读更多...
shell之正则表达式及三剑客grep命令

shell之正则表达式及三剑客grep命令

一、正则表达式概述 什么是正则表达式&#xff1f; 正则表达式是一种描述字符串匹配规则的重要工具 1、正则表达式定义: 正则表达式&#xff0c;又称正规表达式、常规表达式 使用字符串描述、匹配一系列符合某个规则的字符串 正则表达式 普通字符&#xff1a; 大小写字母…
阅读更多...
LED全彩显示屏的前后维护

LED全彩显示屏的前后维护

LED全彩显示屏的维护问题成为一个备受关注的难题。特别是对于采用镶嵌式或壁挂式安装的用户而言&#xff0c;检修和维护工作变得异常繁琐&#xff0c;仿佛一举一动都会影响整体运行。在这一背景下&#xff0c;LED全彩显示屏不仅需要符合严格的标准化要求&#xff0c;更需要具备…
阅读更多...
【CHI】（三）网络层

【CHI】（三）网络层

网络层负责确定目标节点的NodeID。本章包含以下部分&#xff1a; 系统地址映射&#xff0c;SAM节点ID目标ID确定网络层flow示例 1. System address map 系统中每个Requester(包括RN和HN)必须有一个System Address Map(SAM)来决定一个request的target ID。SAM的范围可能只是简…
阅读更多...
【Spring】深入探索 Spring AOP：概念、使用与实现原理解析

【Spring】深入探索 Spring AOP：概念、使用与实现原理解析

文章目录 前言一、初识 Spring AOP1.1 什么是 AOP1.2 什么是 Spring AOP 二、AOP 的核心概念2.1 切面&#xff08;Aspect&#xff09;2.2 切点&#xff08;Pointcut&#xff09;2.3 通知&#xff08;Advice&#xff09;2.4 连接点&#xff08;Join Point&#xff09; 三、Sprin…
阅读更多...
Android复习（Android基础-四大组件)——Broadcast

Android复习（Android基础-四大组件)——Broadcast

1. 广播分类 广播的发送方式&#xff1a;标准广播、有序广播、粘性广播广播的类型&#xff1a;系统广播、本地广播 1.1 标准广播 完全异步&#xff0c;无序的广播发出后&#xff0c;所有的广播接收器几乎都会在同一时间收到消息。&#xff08;异步&#xff09;但是消息无法截…
阅读更多...
科技云报道：算力之战，英伟达再度释放AI“炸弹”

科技云报道：算力之战，英伟达再度释放AI“炸弹”

科技云报道原创。 近日&#xff0c;在计算机图形学顶会SIGGRAPH 2023现场&#xff0c;英伟达再度释放深夜“炸弹”&#xff0c;大模型专用芯片迎来升级版本。 英伟达在会上发布了新一代GH200 Grace Hopper平台&#xff0c;该平台依托于搭载全球首款搭载HBM3e处理器的新型Grac…
阅读更多...
Java并发之ReentrantLock

Java并发之ReentrantLock

AQS AQS&#xff08;AbstractQueuedSynchronizer&#xff09;&#xff1a;抽象队列同步器&#xff0c;是一种用来构建锁和同步器的框架。在是JUC下一个重要的并发类&#xff0c;例如&#xff1a;ReentrantLock、Semaphore、CountDownLatch、LimitLatch等并发都是由AQS衍生出来…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023