vite+vue3+element-plus改变表格单元格颜色

一、创建应用

npm init vite@latest my-app -- --template vue

二、启动应用

npm run dev

这里注意，用vite启动后会提示：Network: use --host to expose，且无法通过网络IP访问服务。

当 局域网 中另一台设备需要访问该服务时，必须通过本机 IP + 端口 访问。 尝试访问后，发现找不到这个服务。

原因是： 没有将服务暴露在网络中

解决方案：修改npm脚本，package.json中

"scripts": {    
    "dev": "vite --host",    
    "build": "vite build",    
    "preview": "vite preview"  
},

三、安装element-plus

npm install element-plus --save

main.js

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).mount('#app')

四、代码实现

<template>
  <el-color-picker v-model="color" />
  <el-table :data="tableData" @cell-click="cellClick" :cell-style="cellStyle" border style="width: 600px">
    <el-table-column prop="id" label="标识"  width="200"/>
    <el-table-column prop="name" label="姓名"  width="200" />
    <el-table-column prop="age" label="年龄"  width="200"/>
  </el-table>
</template>

<script setup>
import {reactive, ref,watch} from 'vue'

const color=ref("")
const currentValue = ref('')
const currentBgc = reactive({})
const tableData = [{id:1,name:'张三',age:18},{id:2,name:'李四',age:22},{id:3,name:'李四',age:33}]

//监听color
watch(color,(newValue,oldValue)=>{
  currentBgc[currentValue.value] = color.value
})

//单元格点击
const cellClick = (row, column)=>{
  currentValue.value = `${row.id}_${column.property}`
  console.log('currentValue.value',currentValue.value);
}
//单元格的 style 的回调方法
const cellStyle = ({row, column})=>({
  'border':`${row.id}_${column.property}`===currentValue.value?'2px solid #000':'',
  'backgroundColor':currentBgc[`${row.id}_${column.property}`]||''
})
</script>

<style scoped>
</style>