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

news2024/9/20 22:50:29

Ⅰ、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/856178.html

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

相关文章

.NET根据类的值进行序列化反序列化操作

.NET根据类的值进行序列化反序列化操作

前言&#xff1a; 在.NET种&#xff0c;序列化一般常用的方式是使用Newtonsoft.Json进行序列化和反序列化操作&#xff0c;比如创建一个Person类 public class Person {public string Name { get; set; }public int Age { get; set; } }序列化为json // 对象序列化为 JSONPe…
阅读更多...
vuejs 设计与实现 - 快速diff算法

vuejs 设计与实现 - 快速diff算法

Vue.js 2 所采用的双端 Diff 算法。既然快速 Diff 算法如此高效&#xff0c;我们有必要了解它的思路。接下来&#xff0c;我们就着重讨论快速 Diff 算法的实现原理。 相同的前置元素和后置元素 快速 Diff 算法借鉴了纯文本 Diff 算法中预处理的步骤。 案例&#xff1a; 旧的…
阅读更多...
数据结构-队列（C语言的简单实现）

数据结构-队列（C语言的简单实现）

简介 队列也是一种数据结构&#xff0c;队列也可以用来存放数字每次只能向队列里将入一个数字&#xff0c;每次只能从队列里获得一个数字在队列中&#xff0c;允许插入的一段称为入队口&#xff0c;允许删除的一段称为出队口它的原则是先进先出(FIFO: first in first out)&…
阅读更多...
Java8实战-总结15

Java8实战-总结15

Java8实战-总结15 引入流流简介流与集合 引入流 流简介 要讨论流&#xff0c;先来谈谈集合&#xff0c;这是最容易上手的方式。Java 8中的集合支持一个新的stream方法&#xff0c;它会返回一个流(接口定义在java.util.stream.Stream里)。在后面会看到&#xff0c;还有很多其他…
阅读更多...
自从学了C++之后，小雅兰就有对象了！！！（类与对象）（中）——“C++”

自从学了C++之后，小雅兰就有对象了！！！（类与对象）（中）——“C++”

各位CSDN的uu们好呀&#xff0c;好久没有更新小雅兰的C专栏啦&#xff0c;话不多说&#xff0c;让我们进入类和对象的世界吧&#xff01;&#xff01;&#xff01; 类的6个默认成员函数 构造函数 析构函数 拷贝构造函数 类的6个默认成员函数 如果一个类中什么成员都没有&am…
阅读更多...
C 语言中，「.」与「-＞」有什么区别？

C 语言中，「.」与「-＞」有什么区别？

使用“.”的话&#xff0c;只需要声明一个结构体。格式是结构体类型名结构体名。然后通过结构体名加上“.”再加上域名&#xff0c;就可以引用结构体的域了。因为结构体的内存是自动分配的&#xff0c;就像使用int a;一样。而使用“->”的话&#xff0c;需要声明一个结构体的…
阅读更多...
【三维编辑】Seal-3D：基于NeRF的交互式像素级编辑

【三维编辑】Seal-3D：基于NeRF的交互式像素级编辑

文章目录 摘要一、引言二、方法2.1.基于nerf的编辑问题概述2.2.编辑指导生成2.3.即时预览的两阶段学生训练 三、实验总结 项目主页: https://windingwind.github.io/seal-3d/ 代码&#xff1a;https://github.com/windingwind/seal-3d/ 论文: https://arxiv.org/pdf/2307.15131…
阅读更多...
vue3 动态导入src/page目录下的所有子文件，并自动注册所有页面组件

vue3 动态导入src/page目录下的所有子文件，并自动注册所有页面组件

main.js添加一下代码&#xff1a; const importAll (modules) > {Object.keys(modules).forEach((key) > {const component key.replace(/src/, /).replace(.vue, );const componentName key.split(/).slice(-2, -1)[0] -page;app.component(componentName, modules…
阅读更多...
Vue2-简介、模板语法、数据绑定、MVVM、数据代理、事件处理

Vue2-简介、模板语法、数据绑定、MVVM、数据代理、事件处理

&#x1f954;&#xff1a;成功之后就能光明正大地回望所有苦难 VUE-Day1 Vue简介1、Vue是什么&#xff1f;2、谁开发的&#xff1f; 发展历程&#xff1f;3、Vue的特点4、容器和实例、实例中的el和data总结 Vue模板语法插值语法指令语法 数据绑定1.单向数据绑定&#xff08;v-…
阅读更多...
SpringBoot入职学习

SpringBoot入职学习

一、前言 公司入职&#xff0c;第一个事是把公司项目运行起来。然后在经过几天的颠沛流离&#xff0c;遇到一个事情。在创建yml文件的时候&#xff0c;需要设置自己的配置文件。当然还是先跑起来项目&#xff0c;就使用别人的yml文件。但是&#xff0c;到springboot配置那里卡…
阅读更多...
视频抠像软件有哪些？简单好用视频抠像软件分享

视频抠像软件有哪些？简单好用视频抠像软件分享

在视频后期制作中&#xff0c;抠像通常用于将视频中的某个元素从其背景中分离出来。这种处理技术可以用于各种用途&#xff0c;比如创建特效、添加背景&#xff0c;或者将视频元素组合到新场景中。在电影、电视剧和广告等专业的影视制作中&#xff0c;抠像是一个常见的技术步骤…
阅读更多...
cesium学习记录04-坐标系

cesium学习记录04-坐标系

一、地理坐标系和投影坐标系的关系 地理坐标系 (Geographic Coordinate System, GCS) 定义&#xff1a;地理坐标系是一个基于三维地球表面的坐标系统。它使用经度和纬度来表示地点的位置。 特点&#xff1a; 使用经纬度来定义位置。 基于特定的地球参考椭球体。 适用于全球范…
阅读更多...
2023河南萌新联赛第（五）场：郑州轻工业大学 --亚托莉 -我挚爱的时光-

2023河南萌新联赛第（五）场：郑州轻工业大学 --亚托莉 -我挚爱的时光-

题目描述 亚托莉&#xff0c;-我挚爱的时光- 亚托莉自身机器可能有出了一点小故障&#xff0c;希望你能帮助她解决这个问题&#xff5e; 亚托莉内部的操作系统的是 Linux 操作系统&#xff0c;不同于 Windows 操作系统。在大多数情况下&#xff0c; Linux 操作系统一般是通过…
阅读更多...
死磕Android性能优化，卡顿原因与优化方案

死磕Android性能优化，卡顿原因与优化方案

随着移动互联网的快速发展&#xff0c;Android应用的性能优化变得尤为重要。卡顿是用户体验中最常见的问题之一&#xff0c;它会导致应用的响应变慢、界面不流畅&#xff0c;甚至影响用户的使用体验。因此&#xff0c;我们需要深入了解卡顿问题的原因&#xff0c;并寻找相应的解…
阅读更多...
(Python)Requests+Pytest+Allure接口自动化测试框架从0到1搭建

(Python)Requests+Pytest+Allure接口自动化测试框架从0到1搭建

前言&#xff1a;本文主要介绍在企业使用Python搭建接口自动化测试框架&#xff0c;数据驱动读取excel表里的数据&#xff0c;和数据库方面的交互&#xff0c;包括关系型数据库Mysql和非关系型数据库MongDB&#xff0c;连接数据库&#xff0c;读取数据库中数据&#xff0c;最后…
阅读更多...
刷题DAY18

刷题DAY18

题目一 LRU算法的实现 做一个key-value结构 假如说这个LRU的大小为3 那么就是当KEY-value没满的时候 直接顺序加入 当满了的时候 把最长时间没有使用的key-value替换掉 要求实现一个put 和 get行为 时间复杂度均为O(1) 用双向链表哈希表实现 哈希表可以用系统封装的双向链表…
阅读更多...
node笔记——调用免费qq的smtp发送html格式邮箱

node笔记——调用免费qq的smtp发送html格式邮箱

文章目录 ⭐前言⭐smtp授权码获取⭐nodemailer⭐postman验证接口⭐结束 ⭐前言 大家好&#xff0c;我是yma16&#xff0c;本文分享关于node调用免费qq的smtp发送邮箱。 node系列往期文章 node_windows环境变量配置 node_npm发布包 linux_配置node node_nvm安装配置 node笔记_h…
阅读更多...
嵌入式开发的学习与未来展望：借助STM32 HAL库开创创新之路

嵌入式开发的学习与未来展望：借助STM32 HAL库开创创新之路

引言&#xff1a; 嵌入式开发作为计算机科学领域的重要分支&#xff0c;为我们的日常生活和产业发展提供了无限的可能。STMicroelectronics的STM32系列芯片以其出色的性能和广泛的应用领域而备受关注。而STM32 HAL库作为嵌入式开发的高级库&#xff0c;为学习者提供了更高效、更…
阅读更多...
Jmeter(六) - 从入门到精通 - 建立数据库测试计划（详解教程）

Jmeter(六) - 从入门到精通 - 建立数据库测试计划（详解教程）

1.简介 在实际工作中&#xff0c;我们经常会听到数据库的性能和稳定性等等&#xff0c;这些有时候也需要测试工程师去评估和测试&#xff0c;因此这篇文章主要介绍了jmeter连接和创建数据库测试计划的过程,在文中通过示例和代码非常详细地介绍给大家&#xff0c;希望对各位小伙…
阅读更多...
浅谈JVM中的即时编译器（Just-In-Time compiler, JIT）

浅谈JVM中的即时编译器（Just-In-Time compiler, JIT）

Java虚拟机&#xff08;JVM&#xff09;中的即时编译器&#xff08;Just-In-Time compiler, JIT&#xff09;是一个非常重要的组件&#xff0c;它负责将字节码转换为本地机器代码。在不使用JIT的情况下&#xff0c;JVM通过解释字节码来执行程序&#xff0c;这意味着它会为每个字…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023