(table): tableCheckedKeys 加入半选状态

更新文档
This commit is contained in:
就眠儀式 2022-06-19 21:19:08 +08:00
parent cb1672b8e1
commit 8926bb6022
3 changed files with 13 additions and 4 deletions

View File

@ -54,7 +54,9 @@ const emit = defineEmits([
const slot = useSlots(); const slot = useSlots();
const slots = slot.default && slot.default(); const slots = slot.default && slot.default();
const allChecked = ref(false); const allChecked = ref(false);
const hasChecked = ref(false);
const tableDataSource = ref([...props.dataSource]); const tableDataSource = ref([...props.dataSource]);
const tableSelectedKeys = ref<Recordable[]>([...props.selectedKeys]); const tableSelectedKeys = ref<Recordable[]>([...props.selectedKeys]);
const tableColumns = ref([...props.columns]); const tableColumns = ref([...props.columns]);
@ -94,9 +96,14 @@ watch(
} else { } else {
allChecked.value = false; allChecked.value = false;
} }
if (tableSelectedKeys.value.length > 0) {
hasChecked.value = true;
} else {
hasChecked.value = false;
}
emit("update:selectedKeys", tableSelectedKeys.value); emit("update:selectedKeys", tableSelectedKeys.value);
}, },
{ deep: true } { deep: true, immediate: true }
); );
const change = function (page: any) { const change = function (page: any) {
@ -298,7 +305,8 @@ props.dataSource.map((value: any) => {
<th v-if="checkbox" class="layui-table-col-special"> <th v-if="checkbox" class="layui-table-col-special">
<div class="layui-table-cell laytable-cell-checkbox"> <div class="layui-table-cell laytable-cell-checkbox">
<lay-checkbox <lay-checkbox
v-model="allChecked" v-model="hasChecked"
:is-indeterminate="!allChecked"
skin="primary" skin="primary"
label="all" label="all"
@change="changeAll" @change="changeAll"

View File

@ -207,7 +207,7 @@ function handleClick(node) {
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
const checkedKeys = ref([]) const checkedKeys = ref([30,31])
const showCheckbox = ref(true) const showCheckbox = ref(true)
</script> </script>

View File

@ -14,13 +14,14 @@
<ul> <ul>
<a name="1-1-8"></a> <a name="1-1-8"></a>
<li> <li>
<h3>1.1.8 <span class="layui-badge-rim">2022-06-18</span></h3> <h3>1.1.8 <span class="layui-badge-rim">2022-06-19</span></h3>
<ul> <ul>
<li>[新增] checkbox 组件 is-indeterminate 属性, 用于展示半选状态</li> <li>[新增] checkbox 组件 is-indeterminate 属性, 用于展示半选状态</li>
<li>[新增] layui-vue-helper 插件, 用于 Visual Studio Code 辅助开发</li> <li>[新增] layui-vue-helper 插件, 用于 Visual Studio Code 辅助开发</li>
<li>[新增] textarea 组件 show-count 属性, 用于展示输入长度与 max-length</li> <li>[新增] textarea 组件 show-count 属性, 用于展示输入长度与 max-length</li>
<li>[修复] carousel 组件加载时无法获取 carousel-item 轮播项</li> <li>[修复] carousel 组件加载时无法获取 carousel-item 轮播项</li>
<li>[修复] input-number 组件 modelValue 属性类型错误</li> <li>[修复] input-number 组件 modelValue 属性类型错误</li>
<li>[修复] checkbox 组件 夜间模式 选中状态异常</li>
</ul> </ul>
</li> </li>
</ul> </ul>