layui-vue怎么修改table表头

85 阅读1分钟

看下效果

image.png

直接上代码

<template>
  <lay-table :default-toolbar="true" :columns="columns5" :data-source="dataSource5">
    <template #title="{column}">
      <span class="text-center">{{column.title}}</span>
      <lay-tooltip content="我是这个地址的注释" position="top">
            <lay-icon type="layui-icon-tips" size="15px" style="cursor: pointer;"></lay-icon>
       </lay-tooltip>
    </template>
  </lay-table>
</template>

<style>
/* 使用 has 来选择父元素 */
span:has(.text-center) {
  width: 100%;
  display: block;
  text-align: center;
}
</style>

<script>
import { ref } from 'vue'

export default {
  setup() {

    const columns5 = [
      {
        title: "编号",
        width: "120px",
        key: "id"
      },
      {
        title: "名称",
        width: "100px",
        key: "name"
      },
      {
        title: "性别",
        width: "100px",
        key: "sex"
      },
      {
        title: "地址",
        // 重点:使用头部插槽
        titleSlot: "title", 
        children: [
          { title: "省", key: "prov", width: "100px" },
          { title: "市", key: "city", width: "100px" },
          { title: "区", key: "area", width: "100px" },
        ]
      },
      {
        title: "签名",
        width: "240px",
        key: "remark"
      },
    ]

    const dataSource5 = [
      { id: "10001", name: "夏娜1", prov: "浙江", sex: "女", city: "杭州", area: "西湖区", remark: '不知江月待何人,但见长江送流水。' },
      { id: "10002", name: "夏娜2", prov: "浙江", sex: "女", city: "杭州", area: "西湖区", remark: '不知江月待何人,但见长江送流水。' },
      { id: "10003", name: "夏娜3", prov: "浙江", sex: "女", city: "杭州", area: "西湖区", remark: '不知江月待何人,但见长江送流水。' },
      { id: "10004", name: "夏娜4", prov: "浙江", sex: "女", city: "杭州", area: "西湖区", remark: '不知江月待何人,但见长江送流水。' },
      { id: "10005", name: "夏娜5", prov: "浙江", sex: "女", city: "杭州", area: "西湖区", remark: '不知江月待何人,但见长江送流水。' },
      { id: "10006", name: "夏娜6", prov: "浙江", sex: "女", city: "杭州", area: "西湖区", remark: '不知江月待何人,但见长江送流水。' },
      { id: "10007", name: "夏娜7", prov: "浙江", sex: "女", city: "杭州", area: "西湖区", remark: '不知江月待何人,但见长江送流水。' },
      { id: "10008", name: "夏娜8", prov: "浙江", sex: "女", city: "杭州", area: "西湖区", remark: '不知江月待何人,但见长江送流水。' }
    ]

    return {
      columns5,
      dataSource5,
    }
  }
}
</script>