vxe-table多选不生效
时间: 2023-11-16 14:05:27 浏览: 62
vxe-table多选不生效可能是由于以下原因导致的:
1.未正确配置多选属性;
2.未正确绑定多选列;
3.未正确设置多选列的宽度;
4.未正确设置表格高度。
解决方法如下:
1.确保已正确配置多选属性,例如:selection-config="{showHeader: true, checkStrictly: true}";
2.确保已正确绑定多选列,例如:<vxe-table-column type="selection" width="60"></vxe-table-column>;
3.确保已正确设置多选列的宽度,例如:width="60";
4.确保已正确设置表格高度,例如:height="400"。
相关问题
vxe-table多选下拉
为了实现vxe-table的多选下拉功能,需要使用vxe-table-plugin-menus插件。以下是一个实现vxe-table多选下拉的例子:
```html
<template>
<vxe-table
ref="xTable"
:data="tableData"
:columns="columns"
:checkbox-config="{ range: true }"
:edit-config="{ trigger: 'click', mode: 'cell' }"
:toolbar="toolbar"
@checkbox-range-change="handleCheckboxRangeChange"
></vxe-table>
</template>
<script>
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
import menusPlugin from 'vxe-table-plugin-menus'
export default {
name: 'vxeTableDemo',
data() {
return {
tableData: [
{ id: 1, name: 'John Brown', age: 18, address: 'New York No. 1 Lake Park', checked: false },
{ id: 2, name: 'Jim Green', age: 24, address: 'London No. 1 Lake Park', checked: false },
{ id: 3, name: 'Joe Black', age: 30, address: 'Sydney No. 1 Lake Park', checked: false },
{ id: 4, name: 'Jon Snow', age: 26, address: 'Ottawa No. 2 Lake Park', checked: false }
],
columns: [
{ field: 'id', title: 'ID', width: 80 },
{ field: 'name', title: 'Name', width: 120 },
{ field: 'age', title: 'Age', width: 80 },
{ field: 'address', title: 'Address', width: 220 },
{ field: 'checked', title: 'Checked', width: 100, type: 'checkbox' }
],
toolbar: {
menus: [
{
id: 'menu1',
title: 'Select All',
visibleMethod({ $table }) {
return $table && $table.getCheckboxRecords().length < $table.tableData.length
},
clickMethod({ $table }) {
$table.setCheckboxRow({ checked: true })
}
},
{
id: 'menu2',
title: 'Unselect All',
visibleMethod({ $table }) {
return $table && $table.getCheckboxRecords().length > 0
},
clickMethod({ $table }) {
$table.clearCheckboxRow()
}
}
]
}
}
},
mounted() {
VXETable.use(menusPlugin)
this.$refs.xTable.load()
},
methods: {
handleCheckboxRangeChange({ records }) {
console.log(records)
}
}
}
</script>
```
在这个例子中,我们使用了vxe-table-plugin-menus插件来实现多选下拉功能。我们还使用了checkbox-config属性来启用多选框,并使用checkbox-range-change事件来获取所选数据。我们还使用了toolbar属性来添加两个菜单项,以便全选和取消全选。
用 vxe-table 实现 多选下拉表格
1. 安装 vxe-table
```
npm install vxe-table --save
```
2. 在 Vue 项目中引用 vxe-table
```javascript
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
Vue.use(VXETable)
```
3. 在 Vue 模板中使用 vxe-table
```html
<vxe-table :data="tableData" checkbox-config="{range: true}">
<vxe-table-column type="selection" width="60"></vxe-table-column>
<vxe-table-column field="name" title="姓名"></vxe-table-column>
<vxe-table-column field="age" title="年龄"></vxe-table-column>
<vxe-table-column field="address" title="地址"></vxe-table-column>
</vxe-table>
```
4. 在 Vue 实例中定义数据
```javascript
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20, address: '北京市' },
{ name: '李四', age: 30, address: '上海市' },
{ name: '王五', age: 40, address: '广州市' },
{ name: '赵六', age: 50, address: '深圳市' }
]
}
}
}
```
5. 使用多选下拉框
```html
<template>
<div>
<vxe-dropdown ref="dropdown" v-model="value" :options="options" multiple>
<template #option="{ option, $index }">
<vxe-checkbox :label="option.value" :content="option.label" :indeterminate="option.indeterminate" :checked="option.checked" @change="handleChange($event, option)"></vxe-checkbox>
</template>
</vxe-dropdown>
<vxe-table :data="tableData" checkbox-config="{range: true}" ref="table">
<vxe-table-column type="selection" width="60"></vxe-table-column>
<vxe-table-column field="name" title="姓名"></vxe-table-column>
<vxe-table-column field="age" title="年龄"></vxe-table-column>
<vxe-table-column field="address" title="地址"></vxe-table-column>
</vxe-table>
</div>
</template>
```
```javascript
export default {
data() {
return {
options: [
{ label: '张三', value: '1' },
{ label: '李四', value: '2' },
{ label: '王五', value: '3' },
{ label: '赵六', value: '4' },
],
value: ['1', '2'],
tableData: [
{ name: '张三', age: 20, address: '北京市' },
{ name: '李四', age: 30, address: '上海市' },
{ name: '王五', age: 40, address: '广州市' },
{ name: '赵六', age: 50, address: '深圳市' }
]
}
},
methods: {
handleChange (checked, option) {
if (checked) {
this.value.push(option.value)
} else {
const index = this.value.indexOf(option.value)
if (index > -1) {
this.value.splice(index, 1)
}
}
}
}
}
```