Viog UI

可输入表格 input-table 待优化

用于已规定格式的表格内容输入器

提示

此组件可在form组件中使用

使用说明

简单引入

通过v-model绑定一个数组，数组中每个单元为表格的一列值

通过col组件定义表格列，value为对应列的单元属性名，若不传入value，默认值为0,1...n-1

通过默认插槽传入列别名

点击后方小icon可删除改行

第一列
第二列
第三列
展开代码
<template>
    <vi-input-table v-model="tableOne">
        <vi-input-table-col>0</vi-input-table-col>
        <vi-input-table-col>1</vi-input-table-col>
        <vi-input-table-col>2</vi-input-table-col>
    </vi-input-table>
</tempalte>

<script>
    const tableOne = ref([])
</script>

列宽

通过css属性--vi-table-td-width给定列宽度

name
age
展开代码
<template>
    <vi-input-table v-model="objOne">
        <vi-input-table-col value="name" style="--vi-table-td-width: 100px;"></vi-input-table-col>
        <vi-input-table-col value="age" style="--vi-table-td-width: 40px;"></vi-input-table-col>
    </vi-input-table>
</tempalte>

<script>
  const objOne = reactive([
    {
      name: 'viog',
      age: 20 
    },
    {
      name: 'tableCute',
      age: 22
    },
  ])
</script>

扩展输入

通过属性extension开启行扩展功能

0
1
2
展开代码
<template>
    <vi-input-table v-model="tableTwo" extension>
        <vi-input-table-col></vi-input-table-col>
        <vi-input-table-col></vi-input-table-col>
        <vi-input-table-col></vi-input-table-col>
    </vi-input-table>
</tempalte>

<script>
    const tableTwo = reactive([])
</script>

单选

通过属性pick开启单选，传入pickValue获取选择值（ps：单选值使用数组存放）

0
1
2
0
1
展开代码
<template>
    <vi-input-table v-model="tableThree" pick :pickValue="valuePick">
        <vi-input-table-col></vi-input-table-col>
        <vi-input-table-col></vi-input-table-col>
        <vi-input-table-col></vi-input-table-col>
    </vi-input-table>
</tempalte>

<script>
    const tableThree = reactive([
    ['你好', '很搞笑', '认识你'],
    ['你好', '很搞笑', '认识你']
  ])
    const valuePick = reactive([])
</script>

多选

通过属性multi开启单多选，传入pickValue获取选择值

[ 0, 1 ]
0
1
2
0
1
展开代码
<template>
    <vi-input-table v-model="tableThree" multi :pickValue="valueMulti">
        <vi-input-table-col></vi-input-table-col>
        <vi-input-table-col></vi-input-table-col>
        <vi-input-table-col></vi-input-table-col>
    </vi-input-table>
</tempalte>

<script>
    const tableThree = reactive([
    ['你好', '很搞笑', '认识你'],
    ['你好', '很搞笑', '认识你']
  ])
</script>

Props

input-table

属性名描述类型默认值

input-table-col

属性名描述类型默认值

插槽

input-table

插槽名描述有无默认内容

input-table-col

插槽名描述有无默认内容

事件支持

事件名描述参数列表

可覆写css变量

变量名描述默认值