前言

最新在看看 golang 写的管理员后台，看了一堆 go admin 结果发现不是要买授权，就是 antd 的模版要授权，最后只能是选择 element，毕竟这玩意写的管理员后台 ui 是免费的。顺便记录一下使用 element 遇到的问题吧。对了，我用的是 gin-vue-admin (opens new window)

el-table 表格

el-table 表格中设置某一列增加固定的描述

<el-table-column align="left" label="账户余额" min-width="75">
  <template #default="scope">
    <span :style="{color: scope.row.balance > 100 ? 'red' : 'green'}">
      {{scope.row.balance}}元
    </span>
  </template>  
</el-table-column>

<script setup>
// 测试数据
const userTableData = [
  {
    id: 1,
    balance: 299,
    from: '',
    tradeNo: 'sfd2321312ed456384211',
    lastBackCall: '',
    userType: 1,
    userStatus: 2,
  },
  {
    id: 2,
    balance: 199,
    from: 'bdtg',
    tradeNo: 'gd511491223edw6384211',
    lastBackCall: '12312',
    userType: 1,
    userStatus: 2,
  },
]
</script>

el-table 表格中设置多选、翻页、切换条数并携带记忆功能

1. type="selection" 设置复选框列
2. 设置 :reserve-selection="true" 用于记忆复选框选中的状态
3. @selection-change="handleSelectionChange" 用于监听复选框选中的状态

<el-table :data="userTableData" 
          row-key="id" 
          table-layout="auto" 
          @selection-change="handleSelectionChange">
  <!-- 单独出一列用于展示复选框 -->
  <el-table-column type="selection" :reserve-selection="true" />
  ...
  <el-table-column align="right" label="操作">
    <template #default="scope">
      <el-tooltip content="查看详情"
                        placement="top">
              <el-button circle @click="openNewTabPageShowDetails(scope.row.id)">
                <Icon icon="material-symbols:read-more-rounded" style="font-size: 24px"/>
              </el-button>
            </el-tooltip>
    </template>
  </el-table-column>
</el-table>

<script setup>
// 单行后面执行动作获取到id
function openNewTabPageShowDetails(id) {
  console.log("点击的id为：",id)
}

// 检测勾选的复选框，用于批量操作
function handleSelectionChange(selectRow) {
  const selectedIds = selectRow.map(row => row.id)
  console.log("选择的id为：",selectedIds)
}
</script>

el-table 表格中如何基于内容改变行的颜色

注意：

1. cell-style 是 el-table 的属性，不是 el-table-column 的属性
2. cell-style 是一个函数，函数的参数是一个对象，对象中包含了 row、column、rowIndex、columnIndex，通过这些参数可以获取到当前行的数据，然后根据数据来改变行的颜色
3. cell-style 函数的返回值是一个对象，对象中包含了 backgroundColor，用于改变行的颜色
4. cell-style 不能很好的适配 tailwindcss 的 class，所以需要在 style 中写样式，比如：backgroundColor: 'red'，不能写成 backgroundColor: 'bg-red-500' 而要写成 backgroundColor: 'rgb(255 247 237)'

<el-table :data="userTableData" row-key="id"
          table-layout="auto" :cell-style="tableRowClassName"
          @selection-change="handleSelectionChange">
  <!-- 单独出一列用于展示复选框 -->
  <el-table-column type="selection" :reserve-selection="true" />
  <el-table-column align="left" label="存活业务" prop="tradeNo"/>
  ...
</el-table>

<script setup>
// 基于tradeNo是否为空来改变行的颜色
const tableRowClassName = ({ row, column, rowIndex, columnIndex }) => {
  if (row.tradeNo === '') {
    // 改变行的颜色
    return  { backgroundColor: 'rgb(255 247 237)' };
  }
  // 默认不做改变
  return {}
}
</script>

DatePicker 日期选择器

设置显示为中文

• To 变更为中文 range-separator="到"
• Start date 变更为中文 start-placeholder="开始日期"
• End date 变更为中文 end-placeholder="结束日期"
• 调整显示格式 format="YYYY-MM-DD"
• 调整传递值的格式 value-format="YYYY-MM-DD"

设置默认显示为当天

将 datePicker 的值启动时设置即可

如果不显示的话，基本上是属于月份或者日期小于 10 的时候没有在前面补 0 的原因

// 时间段
const datePickers = ref()

onMounted(() => {
  let nowDate = new Date();
  let year = nowDate.getFullYear();
  let month = nowDate.getMonth() + 1;
  month = month < 10 ? '0' + month : month; // 如果月份为单数，则在前面添加 "0"
  let day = nowDate.getDay();
  day = day < 10 ? '0' + day : day; // 如果日期为单数，则在前面添加 "0"
  datePickers.value = [`${year}-${month}-${day}`, `${year}-${month}-${day}`]
})

datePicker 在 Layout 不受控制

我尝试过后发现是左右两边的 padding 扩宽了 10px 导致的，解决方案是通过样式控制：max-width: 95%;padding-left: 3px;padding-right: 3px