AIoT前端基础组件文档

Appearance

Return to top
On this page

CommonTable 表格模块

基础用法 

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

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

进阶用法：

单行选中/多选

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

  2. isCheck 结合 handleSelectionChange方法，实现多选功能，实现此功能时，如果需要对选中文件进行复显时，可以结合js方法setCurrent进行复选

<template>
  <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"
  ></common-table>
  <el-button @click.stop="handleChange">选中第二行</el-button>
</template>
<script setup>

import { ref,onMounted, getCurrentInstance } from 'vue'
const {proxy} = getCurrentInstance()


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)

// 获取当前变化
function currentChange(data) {
  // console.log(data)
  proxy.$message(`${data.name}${data.age}`)

}

// 
function handleCurrentRowChange(row) {
  console.log(row)

}

function handleSelectionChange(rows) {
    console.log(rows)
}

const tableRef = ref(null)

function handleChange() {
  tableRef.value.setSingleCurrent(tableData.value[2])
}
onMounted(()=> {
  // 复显单行选中
  tableRef.value.setSingleCurrent(tableData.value[0])
  // 复显多个选中
  tableRef.value.setCurrent(tableData.value)
})

</script>



<template>
  <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"
  ></common-table>
  <el-button @click.stop="handleChange">选中第二行</el-button>
</template>
<script setup>

import { ref,onMounted, getCurrentInstance } from 'vue'
const {proxy} = getCurrentInstance()


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)

// 获取当前变化
function currentChange(data) {
  // console.log(data)
  proxy.$message(`${data.name}${data.age}`)

}

// 
function handleCurrentRowChange(row) {
  console.log(row)

}

function handleSelectionChange(rows) {
    console.log(rows)
}

const tableRef = ref(null)

function handleChange() {
  tableRef.value.setSingleCurrent(tableData.value[2])
}
onMounted(()=> {
  // 复显单行选中
  tableRef.value.setSingleCurrent(tableData.value[0])
  // 复显多个选中
  tableRef.value.setCurrent(tableData.value)
})

</script>

带操作按钮的表格

包含操作按钮的表格，需要在tabbleheader中添加type为custom列，动态获取tableData后，对tableData数据进行遍历处理，将每一行都插入actions字段，处理tableData数据时，可以根据每行数据的状态，对操作项进行状态判断，如下例所示，对按钮中的disabled进行动态赋值

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



<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，具体使用方法见下面示例：

<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', type: 'input', 'min-width': '100' },
  {
    label: '年龄',
    name: 'age',
    type: 'select',
    attrs: {
      options: [{ label: '123132', value: 123 }]
    },
    'width': '100'
  },
  {
    label: '性别',
    name: 'sex',
    type: 'switch',
    'width': '80'
  },
  {
    label: '爱好',
    name: 'states',
    type: 'tag',
    'width': '100'
  },
  {
    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 }
    ]
  }
];
function parseStates(key) {
  const states = {
    label: key,
    attrs: {
      type: 'success'
    }
  };
  switch (key) {
    case '离线':
      states.attrs.type = 'normal';
      break;
    case '在线':
      states.attrs.type = 'success';
      break;
    case '损坏':
      states.attrs.type = 'danger';
      break;
    default:
      states.attrs.type = 'info';
      break;
  }
  return states;
}
const tableData = ref([
  { name: '张三', age: 12, sex: true, like: '离线', },
  { name: '张三', age: 12, sex: true,like: '在线' },
  { name: '张三', age: 12, sex: true, like: '损坏'}
]);
tableData.value.map((item) => {
  item.actions = btns;
  item.states = parseStates(item.like)
  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>



<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', type: 'input', 'min-width': '100' },
  {
    label: '年龄',
    name: 'age',
    type: 'select',
    attrs: {
      options: [{ label: '123132', value: 123 }]
    },
    'width': '100'
  },
  {
    label: '性别',
    name: 'sex',
    type: 'switch',
    'width': '80'
  },
  {
    label: '爱好',
    name: 'states',
    type: 'tag',
    'width': '100'
  },
  {
    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 }
    ]
  }
];
function parseStates(key) {
  const states = {
    label: key,
    attrs: {
      type: 'success'
    }
  };
  switch (key) {
    case '离线':
      states.attrs.type = 'normal';
      break;
    case '在线':
      states.attrs.type = 'success';
      break;
    case '损坏':
      states.attrs.type = 'danger';
      break;
    default:
      states.attrs.type = 'info';
      break;
  }
  return states;
}
const tableData = ref([
  { name: '张三', age: 12, sex: true, like: '离线', },
  { name: '张三', age: 12, sex: true,like: '在线' },
  { name: '张三', age: 12, sex: true, like: '损坏'}
]);
tableData.value.map((item) => {
  item.actions = btns;
  item.states = parseStates(item.like)
  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表头，Arrayfalse
----label表头展示文本Stringtrue
----name表头keyStringtrue
----type表格元素类型，默认正常展示，如果type存在值时，会进入插槽模式，input/select/date-picker/input-num/radio/switch/checkbox/color/link/tagStringfalse
----width表格单元格宽度，如果不写会默认平均分配Stringfalse
----min-width表格单元格最小宽度， 如果与width混合使用后会自动撑开表格Stringfalse
----fixed单元格浮动位置，right/leftStringfalse
tableData表格数据Arrayfalse
tableAttrsel-table原始属性继承Arrayfalse
isCheck启东表格多选功能Arrayfalse
isDisable当启用在表格中使用表单元素时，可以通过对此字段进行是否可编辑的控制Arrayfalse
highlight是否高亮Booleanfalse
isEmpty是否是空数据，默认为trueBooleanfalse
height表格高度，默认为100%Stringfalse

事件

事件名称说明回调
changeEvent表格中表单元素触发change事件时触发的回调函数--
blurEvent表格中表单元素触发blur事件时触发的回调函数--
handleCurrentRowChange点击获取当前行事件--
svgEvent节点点击时生效--
handleSelectionChange节点点击时生效--