easyui vue 数据表格
下拉框的实现步骤如下：
1. 引入
easyui 和 vue 相关的 js 和 css 文件。
2. 创建一个 vue 实例，并定义一个数组用于存放
下拉框的
选项数据。
3. 在 HTML 中使用
easyui 的 datagrid 组件，并设置 columns 属性，其中需要使用 formatter 属性将某一列的数据转换为
下拉框。
4. 在 formatter 中使用
easyui 的
combobox 组件，并将
选项数据绑定到该组件中。
5. 在 vue 实例中定义一个方法，用于
获取下拉框的
选项数据，并将其赋
值给
选项数据数组。
6. 在 created 钩子函数中调用该方法，以
获取初始的
选项数据。
代码示例：
HTML：
```
<div id="app">
<table id="datagrid" class="
easyui-datagrid" :data="data">
<thead>
<tr>
<th field="name" width="50%">Name</th>
<th field="gender" width="50%" formatter="genderFormatter">Gender</th>
</tr>
</thead>
</table>
</div>
```
JavaScript：
```
var app = new Vue({
el: '#app',
data: {
data: []
},
methods: {
getGenderOptions: function() {
//
获取下拉框选项数据
return [
{ value: 'M', text: 'Male' },
{ value: 'F', text: 'Female' }
];
},
genderFormatter: function(value, row) {
// 将数据转换为
下拉框
var options = this.getGenderOptions();
var
selectedValue = row.gender;
var html = '<
select class="
easyui-
combobox" style="width:100%;" data-options="';
html += 'valueField: \'value\',';
html += 'textField: \'text\',';
html += 'data: ' + JSON.stringify(options) + '"';
html += '>';
for (var i = 0; i < options.length; i++) {
var option = options[i];
var
selected = option.value ===
selectedValue ? '
selected' : '';
html += '<option value="' + option.value + '" ' +
selected + '>' + option.text + '</option>';
}
html += '</
select>';
return html;
}
},
created: function() {
// 初始化数据
this.data = [
{ name: 'John Doe', gender: 'M' },
{ name: 'Jane Doe', gender: 'F' }
];
//
获取下拉框选项数据
var options = this.getGenderOptions();
// 在
easyui 加载完成后将
选项数据绑定到
下拉框中
$('#datagrid').datagrid({
onLoadSuccess: function(data) {
$.each(data.rows, function(index, row) {
var $
combobox = $(this).datagrid('getPanel').find('td[field="gender"] div
select');
$
combobox.
combobox('loadData', options);
$
combobox.
combobox('setValue', row.gender);
});
}
});
}
});
```
需要注意的是，在
easyui 加载完成后，需要将
选项数据绑定到
下拉框中，这里使用了 jquery 的 each 方法遍历每一行数据，并通过
easyui 的
combobox 组件将
选项数据绑定到对应的
下拉框中。
扫一扫
6999
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
