VUE3之data/methods里面怎么调用setup的data（layui-vue切换卡片式列表）

「爱情、让人受尽委屈。」 2023-09-29 11:48 7阅读 0赞

### 前言 ###

首先，在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 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBATW9zaG936YOR6ZS0_size_20_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBATW9zaG936YOR6ZS0_size_20_color_FFFFFF_t_70_g_se_x_16 1]

### 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>

[layui-vue-admin]: https://gitee.com/layui-vue/layui-vue-admin
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBATW9zaG936YOR6ZS0_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f0fb9dbf15794ee7bb170960fc5dbfb7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATW9zaG936YOR6ZS0,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBATW9zaG936YOR6ZS0_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/33e09d676f2740939faad37e276e4abf.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATW9zaG936YOR6ZS0,size_20,color_FFFFFF,t_70,g_se,x_16