vxe-grid三列复选框，使用数据字典，用逗号连接，数据字典有的，复选框打勾

在 `vxe-grid` 组件中实现三列复选框，并绑定数据字典，可以通过自定义列模板和复选框逻辑来完成。具体实现如下： ### 1. 数据准备 假设数据源中的某一字段存储了逗号拼接的值，例如 `"1,3"`，表示已选中的选项。同时，需要一个数据字典对象或数组来映射这些值与对应的标签。 ```javascript const dataDict = [ { value: '1', label: '选项1' }, { value: '2', label: '选项2' }, { value: '3', label: '选项3' } ]; ``` ### 2. 列配置 在 `vxe-grid` 的列配置中，使用 `template` 自定义每一列的内容，并通过 `v-model:checked` 来绑定复选框的状态。 #### 示例代码： ```vue <template> <vxe-grid :columns="columns" :data="tableData" :edit-config="{ trigger: 'click', mode: 'row' }" > <template #checkboxCellTemplate="{ row, column }"> <!-- 使用 v-for 动态生成三个复选框 --> <div style="display: flex; gap: 10px;"> <label v-for="item in dataDict" :key="item.value"> <input type="checkbox" :checked="isChecked(row, item.value)" @change="toggleCheckbox(row, item.value, $event)" /> {{ item.label }} </label> </div> </template> </vxe-grid> </template> <script> export default { data() { return { dataDict: [ { value: '1', label: '选项1' }, { value: '2', label: '选项2' }, { value: '3', label: '选项3' } ], tableData: [ { id: 1, selectedValues: '1,3' }, { id: 2, selectedValues: '2' } ], columns: [ { field: 'id', title: 'ID' }, { field: 'selectedValues', title: '选项', slots: { default: 'checkboxCellTemplate' } } ] }; }, methods: { isChecked(row, value) { // 检查当前值是否存在于 selectedValues 中 return row.selectedValues ? row.selectedValues.split(',').includes(value) : false; }, toggleCheckbox(row, value, event) { let values = row.selectedValues ? row.selectedValues.split(',') : []; if (event.target.checked) { if (!values.includes(value)) { values.push(value); } } else { values = values.filter(v => v !== value); } // 更新数据 row.selectedValues = values.join(','); } } }; </script> ``` ### 3. 实现说明 - **数据绑定**：`selectedValues` 字段用于存储逗号拼接的选中项。 - **动态生成复选框**：通过 `v-for` 遍历 `dataDict` 生成三个复选框。 - **状态判断**：`isChecked` 方法用于判断当前项是否被选中。 - **更新数据**：`toggleCheckbox` 方法处理复选框变化并更新 `selectedValues` 字段。 ### 4. 样式优化 可以使用 CSS 对复选框进行样式优化，使其更符合 UI 设计需求。 ```css .checkbox-group { display: flex; gap: 10px; } ``` ### 5. 数据持久化 如果需要将数据持久化到后端，可以在 `toggleCheckbox` 方法中添加 API 请求，将更新后的数据提交到服务器。 ---