前言

首先，在vue的setup()函数的执行要比beforeCreate 和 Created生命周期函数都要早，那么你去调用data是比较难得。但是反过来就比较容易了。因为setup定义好了一些变量或者方法，在methods中就可以当成data一样调用了。

我们今天的任务是【layui-vue切换卡片式列表】，这里有几个关键点。
模板基于layui-vue-admin

任务要点分解：

1. methods里面怎么调用setup的data（可以直接this.xxx调用，但是注意生命周期顺序）
2. table怎么通过key触发重新渲染（:key="switchFlag"，绑定一下你产生改变或者需要重新渲染的key，如果没有这种flag可以使用Math.Random()随机触发一个新值）

Change Review

Show me the Code

请注意不同的模板会调用不同的template slot，定义的时候可以定义在一起，使用的时候分开就行了。

<template v-slot:username="{ data }">
              {{ data.username }}
            </template>
            <template v-slot:password="{ data }">
              {{ data.password }}
            </template>
            <template v-slot:detail="{ data }">
              Username: {{ data.username }} <br>
              Password: {{ data.password }} <br>
              AGE: {{ data.age }} <br>
            </template>

//for 卡片调用（统一定义）
	{
          title: "详情",
          width: "600px",
          customSlot: "detail",
          key: "detail",
        },
//for 列表调用（需要逐个字段定义）
     {
        title: "账户",
        width: "200px",
        customSlot: "username",
        key: "username",
      },
      {
        title: "密码",
        width: "180px",
        customSlot: "password",
        key: "password",
      },
      {
        title: "年龄",
        width: "180px",
        key: "age",
      },

页面代码：

<template>
  <lay-container fluid="true" style="padding: 10px">
    <lay-row space="10">
      <lay-col span="24">
        <lay-card>
          <lay-table
            :columns="columns"
            id="id"
            :dataSource="dataSource"
            v-model:selectedKeys="selectedKeys"
            :checkbox="checkbox"
            :default-toolbar="defaultToolbar"
            @row="rowClick" :key="switchFlag"
          >
            <template v-slot:toolbar>
              <lay-button size="sm">新增</lay-button>
              <lay-button size="sm">删除</lay-button>
              <lay-button type="primary" @click="switchDisplay">切换布局</lay-button>
            </template>
            <template v-slot:username="{ data }">
              {{ data.username }}
            </template>
            <template v-slot:password="{ data }">
              {{ data.password }}
            </template>
            <template v-slot:detail="{ data }">
              Username: {{ data.username }} <br>
              Password: {{ data.password }} <br>
              AGE: {{ data.age }} <br>
            </template>
            <template v-slot:operator="{ }">
              <lay-button>修改</lay-button>
              <lay-button type="primary">删除</lay-button>
            </template>
          </lay-table>
        </lay-card>
      </lay-col>
    </lay-row>
  </lay-container>
</template>

<script>
import { ref } from "vue";

export default {
  data(){
    return {
      switchFlag : 1,
      columnCard : [
        {
          title: "详情",
          width: "600px",
          customSlot: "detail",
          key: "detail",
        },
        {
          title: "操作",
          width: "180px",
          customSlot: "operator",
          key: "operator",
        },
      ],
      columnList :[]
    }
  },
  methods:{
    switchDisplay(){
      //init backup columnList from columns
      if(this.columnList.length<1){this.columnList=this.columns}
      //switch to card
      if(this.switchFlag===1){
        this.columns=this.columnCard;
        this.switchFlag=2;
        console.log('switch to card display:'+this.switchFlag)
      }else{
      //switch to list
        this.columns=this.columnList;
        this.switchFlag=1;
        console.log('switch to list display:'+this.switchFlag)
      }
    }
  },
  setup() {
    const selectedKeys = ref(["1"]);
    const checkbox = ref(true);
    const defaultToolbar = ref(true);

    const columns = [
      {
        title: "账户",
        width: "200px",
        customSlot: "username",
        key: "username",
      },
      {
        title: "密码",
        width: "180px",
        customSlot: "password",
        key: "password",
      },
      {
        title: "年龄",
        width: "180px",
        key: "age",
      },
      {
        title: "操作",
        width: "180px",
        customSlot: "operator",
        key: "operator",
      },
    ];

    const dataSource = [
      { id: "1", username: "root", password: "root", age: "18" },
      { id: "2", username: "woow", password: "woow", age: "20" },
    ];

    const rowClick = function (data) {
      console.log(JSON.stringify(data));
    };

    const rowDoubleClick = function (data) {
      console.log(JSON.stringify(data));
    };

    return {
      columns,
      dataSource,
      selectedKeys,
      checkbox,
      defaultToolbar,
      rowClick,
      rowDoubleClick,
    };
  },
};
</script>