AIoT前端公共UI

CommonTable 表格模块

基础用法

:::demo

<template>
  <common-table
    height="300"
    :table-header="tableHeader"
    :table-data="tableData"
  ></common-table>
</template>
<script setup>
import { ref } from 'vue';


const tableHeader = ref([
  { label: '姓名', name: 'name', width: '100' },
  { label: '年龄', name: 'age', 'min-width': '100' }
])

const tableData = ref([
  {name:'张三', age:12},
  {name:'张三', age:12},
  {name:'张三', age:12},
])

const tableAttrs = ref({})

const highlight = ref(true)


</script>

:::

进阶用法：

单行选中/多选

想要使用单行选中功能，需要调用handleCurrentRowChange事件结合highlight进行单行选中功能，如果需要进行单选选中的复选时，需要配合JS方法进行，common-table向外暴露了setSingleCurrent方法，需要传递当前选中的行的row进行选中；注意，如果直接在页面渲染时就调用才方法时，会出现报错，报错原因为html元素未渲染完成，提前对html元素进行了操作，所以需要在onMounted里面进行方法调用；

isCheck 结合 handleSelectionChange方法，实现多选功能，实现此功能时，如果需要对选中文件进行复显时，可以结合js方法setCurrent进行复选 :::demo ```vue <common-table ref="tableRef" height="300" :table-header="tableHeader" :table-data="tableData" :highlight="highlight" is-check @handle-current-row-change="handleCurrentRowChange" @handle-selection-change="handleSelectionChange"

选中第二行

:::


******
#### 带操作按钮的表格
包含操作按钮的表格，需要在tabbleheader中添加type为custom列，动态获取tableData后，对tableData数据进行遍历处理，将每一行都插入actions字段，处理tableData数据时，可以根据每行数据的状态，对操作项进行状态判断，如下例所示，对按钮中的disabled进行动态赋值
:::demo
```vue
<template>
  <common-table
    :table-header="tableHeader1"
    :table-data="tableData"
    :highlight="highlight"
    is-check
    @handle-current-row-change="handleCurrentRowChange"
    @handle-selection-change="handleSelectionChange"
  ></common-table>
</template>
<script setup>

import { ref } from 'vue';


const tableHeader1 = ref([
  { label: '姓名', name: 'name', 'width': '120' },
  { label: '年龄', name: 'age', 'width': '120' },
  {
    label: '操作',
    name: 'custom',
    type: 'custom',
    fixed: 'right',
    'min-width': '100'
  }
]);

function viewDetail() {}
function deleteDevice() {}
const btns = [
  { label: '查看详情', name: 'view', onClick: viewDetail },
  { label: '删除', disabled: true, type: 'danger', name: 'delete', onClick: deleteDevice },
  {
    label: '更多',
    children: [
      { label: '删除', type: 'danger', name: 'delete', onClick: deleteDevice }
    ]
  }
];

const tableData = ref([
  { name: '张三', age: 12 },
  { name: '张三', age: 12 },
  { name: '张三', age: 12 }
]);
tableData.value.map((item) => {
  item.actions = btns;
  return item;
});
const highlight = ref(true);

const currentRow = ref();
// 选择高亮
function handleCurrentRowChange(val) {
  currentRow.value = val;
}

// const isCheck = ref(true);
//
function handleSelectionChange(val) {
  console.log(val);
}

</script>

:::

带表单元素的表格

如果表格中需要使用到表单元素时，需要在tableHeader中加入type值，目前支持的type类型有input/select/date-picker/input-num/radio/switch/checkbox/color/link/tag，具体使用方法见下面示例：