(table): 新增 type 属性 radio 值 与 selectedKey 属性, 用于支持单选

This commit is contained in:
就眠儀式
2022-07-18 16:31:58 +08:00
parent 49e2d25d6d
commit e0c2664bdf
4 changed files with 149 additions and 6 deletions

View File

@@ -616,7 +616,7 @@ export default {
::: title 开启序号
:::
::: demo 通过 `fixed` 属性实现列固定, 可选值为 `left` `right`
::: demo 通过 `columns` 配置 `type:'number'` 开启序号列
<template>
<lay-table :columns="columns21" :dataSource="dataSource21"></lay-table>
@@ -680,7 +680,7 @@ export default {
::: title 开启多选
:::
::: demo 通过 `fixed` 属性实现列固定, 可选值为 `left` `right`
::: demo 通过 `columns` 配置 `type:'checkbox'` 开启单选列
<template>
<lay-table :columns="columns23" :dataSource="dataSource23"></lay-table>
@@ -746,6 +746,73 @@ export default {
:::
::: title 开启单选
:::
::: demo 通过 `columns` 配置 `type:'radio'` 开启单选列。
<template>
<lay-table :columns="columns24" :dataSource="dataSource24" v-model:selectedKey="selectedKey24"></lay-table>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const columns24 = [
{
title: "ID",
width: "30px",
type: "radio",
align: "center"
},
{
title:"账户",
width:"200px",
key:"username"
},{
title:"密码",
width: "300px",
key:"password"
},{
title:"性别",
width: "300px",
key:"sex"
},{
title:"年龄",
width: "300px",
key:"age"
},{
title:"备注",
width: "180px",
key:"remark",
ellipsisTooltip: true
}
]
const selectedKey24 = ref("2");
const dataSource24 = [
{id:"1",username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue谐音类 UI) '},
{id:"2",username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue谐音类 UI) '},
{id:"3",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue谐音类 UI) '},
{id:"4",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue谐音类 UI) '},
{id:"5",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue谐音类 UI) '}
]
return {
columns24,
dataSource24,
selectedKey24,
}
}
}
</script>
:::
::: title 刷新数据
:::
@@ -796,7 +863,7 @@ export default {
])
const changeDataSource22 = () => {
dataSource21.value = [{username:"update", password:"update",sex:"boy", age:"18", remark: '更新数据 '}]
dataSource22.value = [{username:"update", password:"update",sex:"boy", age:"18", remark: '更新数据 '}]
}
return {

View File

@@ -32,7 +32,7 @@
>
<span
>{{ t("home.download") }}<em class="site-showdowns"
>14,684</em
>16,297</em
></span
>
</div>
@@ -43,7 +43,7 @@
rel="nofollow"
class="site-star"
>
<i class="layui-icon"></i> Star <cite id="getStars">1296</cite>
<i class="layui-icon"></i> Star <cite id="getStars">1326</cite>
</a>
<a
href="https://gitee.com/layui-vue"