Table 表格

用于展示多层次结构的数据，可自定义并保持高度灵活。

基础用法

table 表格基本使用示例,需要一个主要的 options 参数。

ID	姓名	地址	电话
1	张三	山东青岛	13812312312
2	李四	山东济南	13812312312
3	王五	北京	13812312312
4	赵六	上海	13812312312

展开查看

vue

<template>
  <tass-table :options="options"></tass-table>
</template>

<script lang="ts" setup>
  import { reactive } from "vue";
  const state = reactive({
      options:{
        fileds:[
          {field:'id',title:'ID',align:'center'},
          {field:'name',title:'姓名',align:'center'},
          {field:'address',title:'地址',align:'center'},
          {field:'telephone',title:'电话',align:'center'}
        ],
        datas:[
          {id:1,name:'张三',address:'山东青岛',telephone:"13812312312"},
          {id:2,name:'李四',address:'山东济南',telephone:"13812312312"},
          {id:3,name:'王五',address:'北京',telephone:"13812312312"},
          {id:4,name:'赵六',address:'上海',telephone:"13812312312"},
        ]
        },
    });
  const { options } = state;
</script>

不同大小

你可以传入一个 size 来确定表格的不同大小，以适配不同的应用场景

small

ID	姓名	地址	电话
1	张三	山东青岛	13812312312
2	李四	山东济南	13812312312
3	王五	北京	13812312312
4	赵六	上海	13812312312

mini

ID	姓名	地址	电话
1	张三	山东青岛	13812312312
2	李四	山东济南	13812312312
3	王五	北京	13812312312
4	赵六	上海	13812312312

展开查看

vue

<template>
  <p>small</p>
  <tass-table :options="options" size="small"></tass-table>
  <p>mini</p>
  <tass-table :options="options" size="mini"></tass-table>
</template>

<script lang="ts" setup>
  import { reactive } from "vue";
  const state = reactive({
    options:{
        fileds:[
          {field:'id',title:'ID',align:'center'},
          {field:'name',title:'姓名',align:'center'},
          {field:'address',title:'地址',align:'center'},
          {field:'telephone',title:'电话',align:'center'}
        ],
        datas:[
          {id:1,name:'张三',address:'山东青岛',telephone:"13812312312"},
          {id:2,name:'李四',address:'山东济南',telephone:"13812312312"},
          {id:3,name:'王五',address:'北京',telephone:"13812312312"},
          {id:4,name:'赵六',address:'上海',telephone:"13812312312"},
        ]
    }
  });
  const { options } = state;
</script>

自定义插槽内容

根据需要自定义表格的插槽内容，插槽接受需要定义表格列的 field 并返回当前行的数据 rowItem ，如果是定义表头，需要在插槽名加上 head- 前缀作为识别符

ID	姓名	地址	电话
1	张三	山东青岛	13812312312
2	李四	山东济南	13812312312
3	王五	北京	13812312312
4	赵六	上海	13812312312

展开查看

vue

<template>
  <tass-table :options="options">
    <template #id="item">
      <div style="color: #008dff">{{ item.scope.row.id }}</div>
    </template>
    <template #action="item">
      <tass-button type="primary" size="small" :disabled="item.scope.rowIndex % 2 == 0" >编辑</tass-button >
      <tass-button type="danger" size="small" >删除</tass-button >
    </template>
  </tass-table>
</template>

<script lang="ts" setup>
  import { reactive } from "vue";
  const state = reactive({
    options:{
        fileds:[
          {field:'id',title:'ID',align:'center'},
          {field:'name',title:'姓名',align:'center'},
          {field:'address',title:'地址',align:'center'},
          {field:'telephone',title:'电话',align:'center'},
          {field:'action',title:'操作',align:'center'}
        ],
        datas:[
          {id:1,name:'张三',address:'山东青岛',telephone:"13812312312"},
          {id:2,name:'李四',address:'山东济南',telephone:"13812312312"},
          {id:3,name:'王五',address:'北京',telephone:"13812312312"},
          {id:4,name:'赵六',address:'上海',telephone:"13812312312"},
        ]
    }
  });
  const dropchange = (item, index) => {
    console.log(item, index);
  };
  const { options, dorpoptions } = state;
</script>

自定义表头及表格样式

使用 headStyle 自定义表头的样式，使用 rowStyle 自定义表格内容区域的样式

ID	姓名	地址	电话
1	张三	山东青岛	13812312312
2	李四	山东济南	13812312312
3	王五	北京	13812312312
4	赵六	上海	13812312312

展开查看

vue

<template>
  <tass-table :options="options" :headStyle="headStyle" :rowStyle="rowStyle" size="mini" ></tass-table>
</template>

<script lang="ts" setup>
  import { reactive, ref } from "vue";
  const state = reactive({
    options:{
        fileds:[
          {field:'id',title:'ID',align:'center'},
          {field:'name',title:'姓名',align:'center'},
          {field:'address',title:'地址',align:'center'},
          {field:'telephone',title:'电话',align:'center'},
        ],
        datas:[
          {id:1,name:'张三',address:'山东青岛',telephone:"13812312312"},
          {id:2,name:'李四',address:'山东济南',telephone:"13812312312"},
          {id:3,name:'王五',address:'北京',telephone:"13812312312"},
          {id:4,name:'赵六',address:'上海',telephone:"13812312312"},
        ]
    },
    headStyle: {
      color: "#fff",
      borderColor: "#855E42",
      backgroundColor: "#9090c0",
    },
    rowStyle: {
      borderColor: "#855E42",
    },
  });
  const { options, headStyle, rowStyle } = state;
</script>

Table 表格 #

基础用法 #

不同大小 #

自定义插槽内容 #

自定义表头及表格样式 #

Table 表格

基础用法

不同大小

自定义插槽内容

自定义表头及表格样式